Accordéon personnalisé - en utilisant chaque

Question

J'essaie de créer un accordéon personnalisé pour ma page afin d'afficher mes messages. Je l’ai sous forme de liste en HTML et j’essaie de créer un effet lorsque vous cliquez sur chaque en-tête pour le développer et afficher plus d’informations.

Mais je ne veux pas avoir six blocs de code pour six des <li> éléments que j'ai sur la page.

Existe-t-il un moyen de l'exécuter via .each (); peut-être Au lieu de créer chaque section? Essayez une approche plus dynamique.

Answer 1

Avez-vous consulté ce tutoriel ?

Parce que, comme le montre cet exemple , plusieurs conditions ne sont pas nécessaires atteindre cet objectif.

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

  

Tous les éléments avec le nom de classe & # 8220; msg_body & # 8221; est réduit lorsque la page est chargée.

     

Le & # 8220; slideToggle () & # 8221; La fonction de jQuery est utilisée pour développer et réduire les & # 8220; div & # 8221; avec la classe & # 8220; msg_body & # 8221 ;.

     

Lorsque l'utilisateur clique sur l'élément avec la classe & # 8220; .msg_head & # 8221 ;, puis div avec la classe & # 8220; msg_body & # 8221; à côté de lui, se bascule avec un effet de glissement, faisant le panneau bascule en utilisant jQuery.

Answer 2

Cochez cette option aussi simple Démo: http://demos.pankaj.pro/ jquery-tutorial-guide-to-build-a-simple-accordéon /

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