Acordeón personalizado - usando cada

Question

Estoy tratando de crear un acordeón personalizado para mi página que muestre mis publicaciones. Lo tengo en formato de lista usando HTML y estoy tratando de crear un efecto cuando haces clic en cada encabezado para expandir y mostrar más información.

Pero no quiero decir seis bloques de código para seis de los <li> elementos que tengo en la página.

¿Hay alguna manera de ejecutarlo a través de .each (); ¿quizás? En lugar de crear cada sección? Pruebe un enfoque más dinámico.

Answer 1

¿Le echó un vistazo a este tutorial ?

Porque, como este ilustra , uno no necesita múltiples condiciones para lograr esto.

<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>

  

Todos los elementos con el nombre de clase & # 8220; msg_body & # 8221; se contrae cuando se carga la página.

     

El & # 8220; slideToggle () & # 8221; La función de jQuery se utiliza para expandir y contraer & # 8220; div & # 8221; con la clase & # 8220; msg_body & # 8221 ;.

     

Cuando el usuario hace clic en el elemento con la clase & # 8220; .msg_head & # 8221 ;, luego div con la clase & # 8220; msg_body & # 8221; junto a él, se alterna con efecto deslizante, haciendo que el panel de alternancia use jQuery.

Answer 2

Comprueba esto también bastante simple Demostración: http://demos.pankaj.pro/ jquery-tutorial-guide-to-build-a-simple-accordion /

código http: // time2hack .com / 2013/01 / jquery-tutorial-guide-to-build-a-custom-and-simple-accordion.html