jQuery Simple Accordion with Plus Minus

Accordion plays a vital role in present day web development and if you see there are plenty of accordion script available on the Internet, but most of them are like plugins or complex lengthy script which you cannot easily understand.

Before going to the tutorial, If you wish you can see the DEMO or DOWNLOAD the script at the bottom of this post.

But, this jQuery Accordion script has only 6 lines of code and written in an easily understandable format.

What all features are there?
1. Only one accordion slide open at a time others will be closed automatically.
2. It has a plus and minus symbol feature (plus for closed accordion and minus for opened accordion).
3. HTML part is written only with <div>, which is again simpler than using <ul><li>tags.

HTML Format:

If you see the HTML part, ‘accordion_head‘ is a clickable band which is visible and ‘accordion_body‘ is the content part which is hidden by default.
So, what we have to do is, when you click the band the content should become visible with a little animation.

Here is the jQuery for that:

Explanation of the jQuery script:
When you click ‘.accordion_head’ it checks for any ‘accordion_body’ div is already visible. If yes, then SlideUp() function should call otherwise slideDown() function should call. Same for ‘+’ and ‘-‘ symbols.

I think the above explanation is enough, but if you confused or not understood, just copy the entire code below and play with it:

Here is the demo and download for you:

demo download


Related Posts

3 thoughts on “jQuery Simple Accordion with Plus Minus

  1. hi there
    if you open a tab and then close it again, it closes then opens again?
    otherwise perfect
    any ideas? thanks

Leave a Reply