Material Didático

Accordion

O componente Accordion é, basicamente, um menu onde cada item tem um corpo oculto (uma div) que será exibido caso seja clicado. Veja esse menu através da Figura 3.

Um Accordion jQuery UI é formado por contêineres (<div>) e headers (<h>) seguindo uma organização hierárquica:

<h3><a href="#">TEMPO ENTRE COSTURAS, O</a></h3>
      <div>
            <p>Texto do item 2</p>
      </div>

<h3><a href="#">HOMENS QUE NAO AMACAM AS MULHERES, OS</a></h3>
      <div>
            <p>Texto do item 2</p>
      </div>

</div>

Um item no Accordion significa um header (h3) seguido de um container (div).
O que diferencia o exemplo acima de apenas HTML puro é a chamada JavaScript no início do bloco (“$("#accordion_1").accordion();”) que informa a biblioteca jQuery UI que a div cujo id é 'accordion_1' é um Accordion.
O corpo de um item de um Accordion não está restrito a um simples texto, como mostrado no exemplo acima; na verdade, o mesmo pode conter qualquer elemento HTML.

Termo de uso

arrow_back Aula 09 - jQuery (Parte 3)

Accordion

Aula 09 - jQuery (Parte 3)