Fisarmonica personalizzata - usando ciascuna

Question

Sto cercando di creare una fisarmonica personalizzata per la mia pagina per visualizzare i miei post. Ce l'ho in formato elenco usando HTML e sto cercando di creare un effetto quando fai clic su ciascuna intestazione per espanderla per mostrare più informazioni.

Ma non voglio dire sei blocchi di codice per sei degli <li> elementi che ho sulla pagina.

Esiste un modo per eseguirlo .each (); Forse? Invece di creare ogni sezione? Prova un approccio più dinamico.

Answer 1

Hai dato un'occhiata a questo tutorial ?

Perché, come esempio , non sono necessarie più condizioni per raggiungere questo obiettivo.

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

  

Tutti gli elementi con il nome classe & # 8220; msg_body & # 8221; viene compresso quando la pagina viene caricata.

     

& # 8220; slideToggle () & # 8221; la funzione di jQuery viene utilizzata per espandere e comprimere & # 8220; div & # 8221; con classe & # 8220; msg_body & # 8221 ;.

     

Quando l'utente fa clic sull'elemento con la classe & # 8220; .msg_head & # 8221 ;, quindi div con la classe & # 8220; msg_body & # 8221; accanto ad esso, viene attivato / disattivato con effetto scorrevole, rendendo il pannello di commutazione usando jQuery.

Answer 2

Controlla anche questo piuttosto semplice Demo: http://demos.pankaj.pro/ jquery dimostrativi-guide-to-build-a-simple-fisarmonica /

Codice http: // time2hack .com / 2013/01 / jquery dimostrativi-guide-to-build-a-custom-e-semplice-accordion.html