JQuery UI - Accordion Toggle All (expandindo informações livremente)

Agora vou guardar mais uma informação útil pra mim compartilhar uma informação que pode ser útil para muitos, assim como foi pra mim.

E confesso que não foi fácil de achar...
   
Problema   

Utilizando o JQuery UI Accordion, por padrão não se pode expandir mais de um item, ou seja, sempre que se expande um, o outro fecha.
Pois bem, eu precisava fazer com que todos os itens abrissem e fechassem livremente, sendo que o último deveria vir aberto por default.

Solução

Depois de muitos testes e pesquisas no Dr. Google, acabei encontrando a solução, que por incrível que pareça, muito simples!
Acredite, tem um plugin (que não me atendeu) para fazer o que 3 linhas de código faz :)
O autor utilizou uma função slideToggle do JQuery para fazer com que o Accordion não feche o outro item.

O código fica assim:

$(document).ready(function () {
      jQuery('#div').accordion({
        collapsible: true,
        active: "h3:last",
        autoHeight: false,
        disabled: true
      });
      jQuery('#div h3.ui-accordion-header').click(function () {
        jQuery(this).next().slideToggle();
      });
    };

Útil, simples, prático e fácil :)

Até a próxima!

Tweet

Pin It