Question

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 six blocks of code for six 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.

Answer 1

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.