Custom accordion - using each
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.
Solution
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.
OTHER TIPS
Check this 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