The Stupid Simple jQuery Accordion Menu: V.3


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.


I have a complete working demo of the menu available here:

You can download the entire menu source by clicking here:

If you would like to play with the menu and test code modifications I have a Fiddle available here:

You may also like...

7 Responses

  1. ChuanPoLee says:

    Not stupid at all! It’s fast and efficient.
    add an expand all and collapse function


  2. 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.


  3. stemkoski says:

    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”)) {
    } else {

  4. 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


  5. biju says:

    this is very nice and simple.
    how can i open default one panel

  6. Michele says:

    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”)) {
    else if ($(‘.ss_content’).is(“:visible”)) {

Leave a Reply

Your email address will not be published. Required fields are marked *