Custom Accordion - Using Each

Question

I am trying to create my own accordion for my page to display my posts. I use it in a list format using HTML, and I'm trying to create an effect when you click on each heading to expand it to show additional information.

But I do not want to say six blocks of code for six of the <li> elements that I have on the page.

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

Answer 1

Have you looked at this tutorial ?

As this example illustrates , this does not require several conditions.

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

The entire element with the class name "msg_body" is reset when the page loads.

The jQuery slideToggle () function is used to expand and smooth the div using the msg_body class.

When the user clicks on the element with the class .msg_head, then the div with the class msg_body next to it, switches using the sliding effect, making the switch panel using jQuery.

Answer 2

Check it out also pretty simple Demo: http://demos.pankaj.pro/jquery-tutorial-guide-to-build-a-simple-accordion/

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