Acordeón personalizado - usando cada
Pregunta
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.
Solución
¿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.
Otros consejos
Comprueba esto también bastante simple Demostración: http://demos.pankaj.pro/ jquery-tutorial-guide-to-build-a-simple-accordion /