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:
|
1 2 3 4 |
<div class="accordion_head">Testing one more<span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Works fine</p> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function(){ //toggle the component with class accordion_body $(".accordion_head").click(function(){ if ($('.accordion_body').is(':visible')) { $(".accordion_body").slideUp(600); $(".plusminus").text('+'); } $(this).next(".accordion_body").slideDown(600); $(this).children(".plusminus").text('-'); }); }); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<html> <head> <style> .accordion_container { width: 500px; } .accordion_head { background: url(images/red.png) brown; color: white; cursor: pointer; font-family: arial; font-size: 14px; margin: 0 0 1px 0; padding: 7px 11px; font-weight: bold; } .accordion_body { background: lightgray; } .accordion_body p{ padding: 5px; margin: 0px; } .plusminus{ float:right; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> $(document).ready(function(){ //toggle the componenet with class accordion_body $(".accordion_head").click(function(){ if ($('.accordion_body').is(':visible')) { $(".accordion_body").slideUp(600); $(".plusminus").text('+'); } $(this).next(".accordion_body").slideDown(600); $(this).children(".plusminus").text('-'); }); }); </script> </head> <h3><a href="http://www.tutorialsmade.com/simple-jquery-accordion-menu-script-ready-to-use-code/">Click here for tutorial</a></h3> <div class="accordion_container"> <div class="accordion_head">Lorem Ipsum<span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="accordion_head">Testing one more<span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Works fine</p> </div> <div class="accordion_head">Testing two more :-)<span class="plusminus">+</span></div> <div class="accordion_body" style="display: none;"> <p>Works fine</p> </div> </div> </html> |
Here is the demo and download for you:
thank you very much…its really helpful
hi there
if you open a tab and then close it again, it closes then opens again?
otherwise perfect
any ideas? thanks
$(this).slideUp(600);
it Above not working please solution in..