Overview:
The original Stupid Simple jQuery Accordion menu was developed in 2010 with the goal of creating a ridiculously simple accordion menu. There were many other menus available online including a great one in the jQuery UI library. What I found is that many of these were overly complicated and difficult to style, especially for entry-level developers. Many of these menus include robust CSS files and large Javascript files that are very difficult to debug and understand.
In an effort to solve this problem, I sat down and tried to create the world’s most simple accordion menu. My goal was to strip out the complicated configuration and styling options common in most menus. The goal was to build a reasonably good looking menu with the least amount of code possible. Admittedly, this menu system won’t work for everyone, but it should be something that can be easily modified for nearly any application.
The code below is for the faster and simpler version 3. Give it a try and feel free to leave a comment if you have any questions.
Downloads:
I have a complete working demo of the menu available here:
http://demo.stemkoski.com/accordion/
You can download the entire menu source by clicking here:
http://demo.stemkoski.com/accordion/accordion.zip
If you would like to play with the menu and test code modifications I have a Fiddle available here: http://jsfiddle.net/ryanstemkoski/6gbq0yLv/
25 responses to “The Stupid Simple jQuery Accordion Menu: V.3”
Not stupid at all! It’s fast and efficient.
add an expand all and collapse function
jQuery(‘.exp’).on(‘click’,function(){
$(‘.ss_content’).slideDown(‘slow’);
});
jQuery(‘.col’).on(‘click’,function(){
$(‘.ss_content’).slideUp(‘slow’);
});
Ryan I am a bit new to JS this is probably really simple but how can I close the panel if you click again on the same header. Right now it closes and opens again.
Chris
Hi Chris, here is some code that will do what you are trying to do:
jQuery(function() {
jQuery(‘.ss_button’).on(‘click’,function() {
if(jQuery(this).next(‘.ss_content’).is(“:visible”)) {
jQuery(‘.ss_content’).slideUp(‘fast’);
} else {
jQuery(‘.ss_content’).slideUp(‘fast’);
jQuery(this).next(‘.ss_content’).slideDown(‘fast’);
}
});
});
Thanks so much worked like a charm
I would also like to have it CLOSE after clicking the heading again, but this did not work for me. I replaced the default code in the accordian.js file which works fine(below) —– with your code above. Is that correct?
jQuery(function() {
jQuery(‘.ss_button’).on(‘click’,function() {
jQuery(‘.ss_content’).slideUp(‘fast’);
jQuery(this).next(‘.ss_content’).slideDown(‘fast’);
});
});
———————————
On last thing how can I target the class :visible and change the button text to an on state while the container is open? Thanks in advance you have been most helpful Ryan
Chris
this is very nice and simple.
how can i open default one panel
Hi Ryan, thanks for your work. I have changed a little the code to prevent the close and open again issue, hope this helps!
$(“.ss_button”).click(function() {
if ($(this).next(‘.ss_content’).is(“:hidden”)) {
$(‘.ss_content’).slideUp(‘slow’);
$(this).next(‘.ss_content’).slideDown(‘slow’);
}
else if ($(‘.ss_content’).is(“:visible”)) {
$(‘.ss_content’).slideUp(‘slow’);
}
});
Can you add a video with step by step?
This is very nice. Thank you! You gave the following code to Chris so he could close on click:
jQuery(function() {
jQuery(‘.ss_button’).on(‘click’,function() {
if(jQuery(this).next(‘.ss_content’).is(“:visible”)) {
jQuery(‘.ss_content’).slideUp(‘fast’);
} else {
jQuery(‘.ss_content’).slideUp(‘fast’);
jQuery(this).next(‘.ss_content’).slideDown(‘fast’);
}
});
});
When I subsitute this for the original code you gave, there is an error in the script and the accordion no longer will work. I am very new to JavaScript so am unable to see the problem. Is there something off in this code? Wondering how I can fix it.
Hey there! Love the code, really helped me out of a jam on a small project at work. I am wondering if there is a simple way to modify the code so that the first tab is open by default on page load. I have an idea of the code to use, but I am having difficulties modifying yours correctly (I am pretty low on the jquery skill spectrum).
Thanks in advance for any help you can offer!
Hi, just add
style="display: block;"to first or whatever option you wish to remain open by default!Hi Everyone,
I had the same question about closing after clicking on the same header. I looked at the cod closely, and the problem was the quotation marks in the new code. Here’s my revised version. I manually changed my quote marks from curly quotes to straight quotes and it worked..
jQuery(function() {
jQuery(‘.ss_button’).on(‘click’,function() {
if(jQuery(this).next(‘.ss_content’).is(“:visible”)) {
jQuery(‘.ss_content’).slideUp(‘fast’);
}
else {
jQuery(‘.ss_content’).slideUp(‘fast’);
jQuery(this).next(‘.ss_content’).slideDown(‘fast’);
}
});
});
For those that had an issue copying and pasting the code above. I figured out what was happening. The single quote and quotes are are being converted. I converted the code to ascii and fixed the quotes and now it’s running great.
Hope this helps!
See here:
jQuery(function() {
jQuery(‘.ss_button’).on(‘click’, function() {
if(jQuery(this).next(‘.ss_content’).is(“:visible”)) {
jQuery(‘.ss_content’).slideUp(‘fast’);
} else {
jQuery(‘.ss_content’).slideUp(‘fast’);
jQuery(this).next(‘.ss_content’).slideDown(‘fast’);
}
});
});
Network Bridge will mechanically use the unique MAC address of the first NIC added into bridge
with the first octet of MAC tackle set to 0x02.
Hello,
really nice work.
But i really need it with a multiple tabs open and close when click it again, I tried your next example but is still not working.
There’s some error somewhere. Can you help me please?
Thanks
Hello,
this is the code if you want to leave multiple tabs open and close it.
As you said the quotes were the mistake.
$(‘.ss_button’).on(‘click’, function() {
if ($(this).next(‘.ss_content’).is(“:visible”)) {
$(‘.ss_content’).slideUp(‘fast’);
} else {
$(this).next(‘.ss_content’).slideDown(‘fast’);
}
});
sorryyy guys but i realize that we are saying the same thing.
Now, i need a function that close just when i click again on same button.
Because so far when i click on one that’s open they all close at same time
Thanks
found solution. ahahahah…sorry guys
$(‘.ss_button’).click(function() {
if ($(this).next(‘.ss_content’).is(‘:hidden’)) {
// $(‘.ss_content’).slideUp(‘fast’);
$(this).next(‘.ss_content’).slideDown(‘fast’);
}
else if ($(‘.ss_content’).is(‘:visible’)) {
$(this).next(‘.ss_content’).slideUp(‘fast’);
}
});
there we go
Hi matteo,
I’m a complete beginner when it comes to javascript and I was just wondering if you could perhaps post the entire thing? I’ve tried pasting your code over and into the existing code with no success so far… I’d just like to know where I made my mistake.
Never mind! Most stupid mistake ever… Used an editor that didn’t show vilifying colours such as Dreamweaver does and completely stumbled over ‘ vs. ‘… Everything works like a charm now 😉
Love it! Thank you!
U save my week, i was trying to combine an accordion with my code, and this was the only one solution. Thank you!
[…] MORE INFO | DEMO – by Ryan Stemtoski (Free Plugin/Tutorial) […]
This is wonderful! Thank you very much!