Coloque a classui_accordion no elemento que será o gatilho da sanfona
Esse elemento pode ser qualquer marcação Html
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
Por padrão, o conteúdo que será aberto está após o gatilho
Para alterar esse padrão, insira o atributo data-obj no gatilho
Use valores notáveis, como prev para anterior e next para próximo (padrão), ex: data-obj="prev"
Ou preencha com qualquer seletor que identifique o seu objeto, ex: data-obj=".minhaClasse" ou data-obj="#meuID"
A velocidade de abertura padrão da sanfona é lenta
Para alterar esse padrão, insira o atributo data-speed no gatilho
Use valores notáveis, como fast para rápido, normal ou slow para lento (padrão), ex: data-speed="fast"
Ou preencha com qualquer valor em ms, ex: data-speed="500"
Use o atributo data-label no gatilho para alterar o texto/rótulo quando ele estiver ativo, ex: data-label="fechar"
Outra opção é desabilitar o botão para retrair o conteúdo, ou seja, ao clicar uma única vez para revelar o conteúdo, o botão não estará mais disponível.
Para isso, use o atributo data-single-click="true".
Use o atributo data-clickoutside="true" no gatilho para recolher a sanfona a partir de cliques em qualquer área da tela
Use o atributo data-anchor="true" no gatilho para ancorar a página até ele quando clicado
Antes e depois da animação da sanfona, usuários avançados podem implementar uma função do tipo callbefore e callback
Para isso, crie a função callbefore_accordion(trigger,obj) e/ou callback_accordion(trigger,obj) e implemente as ações que irão ocorrer antes e/ou depois da animação
Onde trigger é o objeto que gera o efeito (gatilho) e obj é o objeto que sofre o efeito. Como exemplo, a função pode testar se gatilho está ativo, if(trigger.hasClass("active")){}, ou se a sanfona está visível, if(obj.is(":visible")){}.
Essas funções não são obrigatórias, ou seja, só serão executadas se existirem. Caso positivo, para evitar duplicidades, lembre-se de implementar as funções callbefore e callback em arquivos específicos, presentes nas respectivas páginas finais, já que os seus objetivo não são genéricos.
Também é possível usar a função accordion de modo isolado para abrir em eventos ou ações diversas
Para isso, use a função accordion(obj,speed,force)
Onde obj é objeto que será sanfonado, exemplo $("#meuId") ou $(".minhaClass") (tambem pode ser elemento, como "#meuId" ou ".minhaClass").
speed (parâmetro opcional) é a velocidade da animação. Use número em ms ou valores notáveis, como "slow", "normal" (padrão) e "fast".
force (parâmetro opcional) é comportamento da animação (open ou close). Se estiver vazio, o comportamento será variado, ora abre, ora fecha.
A vantagem de usar a função isolada (ao invés de escrever outra função) é o vínculo com a Ui, como as chamadas callbefore e callback