Acordeão personalizado - usando cada
Pergunta
Estou tentando criar um acordeão personalizado para minha página para exibir minhas postagens. Eu o tenho no formato da lista usando HTML e estou tentando criar um efeito quando você clica em cada cabeçalho para expandir para mostrar mais informações.
Mas não quero dizer seis blocos de código para seis dos <li>
Elementos que tenho na página.
Existe uma maneira de executá -lo .Each (); talvez? Em vez de criar cada seção? Tente uma abordagem mais dinâmica.
Solução
Você deu uma olhada em este tutorial ?
Porque, assim Exemplo ilustra, não é necessário várias condições para conseguir isso.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).next(".msg_body").slideToggle(600);
});
});
</script>
Todo o elemento com o nome da classe "msg_body" é colapso quando a página é carregada.
A função "slidetoggle ()" do jQuery é usada para expandir e recolher o "div" com a classe "msg_body".
Quando o usuário clica no elemento com a classe ".msg_head", depois div com a classe "msg_body" ao lado, é alternada com efeito deslizante, fazendo com que o painel de alternância usando o jQuery.
Outras dicas
Verifique isso também uma demonstração bem simples: http://demos.pankaj.pro/jqueryer--utorial-guide-to-build-a-sple-acordion/
códigohttp://time2hack.com/2013/01/jqueryer-tutorial-guide-to-build-a-custom-and-simple-accordion.html