Ao longo de vários artigos estamos explicando muitos dos componentes, também chamados "widgets", que jQueryUI dispõe para aqueles interessados em criar interfaces de usuário enriquecidas.

Neste caso vamos tratar de um componente interessante, que certamente pode aportar muito dinamismo aos conteúdos de nossa página web. Trata-se do Accordion que permite mostrar diversos conteúdos classificados em sessões, de maneira que se mantenha aberta uma dessas sessões e se feche automaticamente só ao abrir outra.

Se sabemos um pouco de jQueryUI já teremos podido ver quão simples resulta, com o mínimo de código, criar componentes de interfaces de usuário potentes e versáteis. O plugin Accordion não é uma exceção, ao contrário, resulta ainda mais impressionante ver o simples que é criar uma interface muito atrativa com praticamente nada de código.

O primeiro que podemos fazer é ver neste link como é um accordion e o código que utilizamos para gerá-lo:

$("#accordion").accordion();

Estrutura HTML para gerar os elementos do accordion

Claro que essa linha de código é o Javascript necessário para iniciar o accordion, mas como você pode imaginar, fará falta algo de HTML. Esta seria a estrutura básica do HTML que utilizaríamos para gerar as sessões do accordion.

<div id="accordion">
   <h3><a href="#">Sessão 1</a></h3>
   <div>Conteúdo 1...</div>
   <h3><a href="#">Sessão 2</a></h3>
   <div>Conteúdo 2...</div>
   <h3><a href="#">Sessão n</a></h3>
   <div>Conteúdo n</div>
</div>

Como você pode observar, é um código HTML do mais habitual. Em princípio, segundo dizem na documentação, devem ser gerados os títulos das sessões no cabeçalho H3, mas durante os testes vimos que o widget por padrão tenta fazer o accordion inclusive com outros cabeçalhos que possamos colocar. Não obstante, se quisermos utilizar outro cabeçalho para as seções podemos indicá-lo ao chamar o plugin nas "options", como veremos mais adiante neste artigo.

Em seguida, o conteúdo de cada sessão é colocado em uma camada DIV, que pode ter qualquer texto com etiquetas HTML diversas, imagens, etc.

Invocar o plugin Accordion

Assim que tivermos nosso HTML só falta invocar o plugin Accordion de jQueryUI, que é feito com a linha de código que vimos antes. Claro que sempre devemos chamá-lo quando o navegador estiver preparado para receber ações e para isso utilizamos o conhecido evento "ready" do "document".

$(document).ready(function() {
   $( "#accordion" ).accordion();
});

Aqui podemos ver o accordion gerado com as opções por padrão.

Opções do plugin Accordion

O comportamento que conseguimos com as opções pré-determinadas será suficiente na maioria dos casos, não obstante, existem algumas alternativas que podemos definir ao invocar o componente. A lista completa pode ser vista na documentação do Accordion de jQueryUI, embora, realmente, não haja muitas que modifiquem de grande maneira o accordion.

As opções são expressas mediante um objeto de "options" que é passado ao invocar o plugin. Por exemplo, aqui estaríamos chamando o accordion com três opções:

$( "#accordion" ).accordion({
   'header': 'h2',
   'fillSpace': true,
   'active': 1
});

• 'header': 'h2 serve para definir que sejam utilizados cabeçalhos HTML de tipo H2 para os títulos das sessões.
• 'fillSpace': true serve para que se ajuste a altura do container onde está colocado o accordion, caso esse container tenha uma altura definida.
• 'active': 1 serve para que se mostre ativada a segunda seção do accordion (a primeira seria a sessão 0, assim que a 1 é a segunda).

Podemos ver um Accordion gerado utilizando essas três opções.