Simple jQuery Accordion Script Ready to use Code

Wondering how to do an Accordiong using jQuery Library?.

Just download this script and start using for your site right now!. (Download and Demo link at the bottom of the post)

This below simple jQuery Accordion Slider script will do the magic!.


$(document).ready(function(){
$(".menu_body").hide();
//toggle the componenet with class menu_body
$(".menu_head").click(function(){
$(this).next(".menu_body").slideToggle(600);
var plusmin;
plusmin = $(this).children(".plusminus").text();

if( plusmin == '+')
$(this).children(".plusminus").text('-');
else
$(this).children(".plusminus").text('+');
});
});

One Paragraph tag and a div tags is used in the whole script to make the accordion slider.

‘p’ tag as ‘menu_head’ and the ‘div’ tag as the ‘menu_body’

When the html page load the whole menu_body will be hidden and only the menu_head will be shown.

Onclick of the menu_head will show the menu_body contents.

See the below html code:


<p class="menu_head">Text Menu 1<span>+</span></p>
<div class="menu_body"style="display: none;">
Some text description will go here
</div>

 

For your convenience, I wrote the entire code in one short:

 

You can see the demo or can download the script it use  it on your project!

Download   Demo

About 

PHP Developer, Part-time Blogger from Bangalore, India. Find me on Facebook

22 Comments

Leave a Reply