Custom accordion - using each

Hey,

I am trying to create a custom accordion for my page to that display my posts. I have it in list format using HTML and I am trying to create an effect when you click each header to expand to show more information.

But I don't want to have say 6 blocks of code for 6 of the <li> elements I have on the page.

Is there a way to run it through .each(); perhaps? Instead of creating each section? Try a more dynamic approach.

I have check other sources and on google, nothing turned up.

Thanks,

Ryan

From stackoverflow

• Did you take a look at this tutorial ?

  Because, as this example illustrates, one does not need multiple conditions to achieve this.

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

  All the element with the class name “msg_body” is collapsed when the page is loaded.

  The “slideToggle()” function of jQuery is used to expand and collapse the “div” with class “msg_body”.

  When user clicks on the element with the class “.msg_head”, then div with class “msg_body” next to it, gets toggled with sliding effect, making toggle panel using jQuery.

  CarolinaJay65 : instead of hiding the class msg_body with javascript (jQuery)...use css (display:none)

• Oh, wow. This is much simpler than I thought it was. Let me try this out. So the next() is the main part that makes this work? So the .msg_head is the element you click to open the panel?

  Ryan

  VonC : Yes, msg_head is the class associated with each header. The associated function will toggle the visibility of each msg_body elements

  VonC : On a side note, you should make this "answer" a comment to my answer. Answers should only be used for... actual answers ;)

  VonC : The next() allow JQuery to access the next 'msg_body' element after the clicked 'msg_head', in order to toggle only the right 'msg_body'.