Acordeão personalizado - usando cada

Question

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.

Answer 1

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.

Answer 2

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