The Stupid Simple jQuery Accordion Menu: V.3

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/

You may also like...

19 Responses

  1. ChuanPoLee says:

    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’);
    });

  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.

    Chris

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

    • Pablo Mosca says:

      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’);
      });
      });
      ———————————

  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

    Chris

  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”)) {
    $(‘.ss_content’).slideUp(‘slow’);
    $(this).next(‘.ss_content’).slideDown(‘slow’);
    }
    else if ($(‘.ss_content’).is(“:visible”)) {
    $(‘.ss_content’).slideUp(‘slow’);
    }
    });

  7. Lynn says:

    Can you add a video with step by step?

  8. Bess says:

    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.

  9. Jason says:

    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!

    • Darshan JOSHI says:

      Hi, just add `style=”display: block;”` to first or whatever option you wish to remain open by default!

  10. Sonkarlay says:

    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’);
    }
    });
    });

  11. David says:

    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’);
    }
    });
    });

  12. adidas says:

    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.

  13. matteo soresini says:

    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

  14. matteo soresini says:

    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’);

    }
    });

    • matteo soresini says:

      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

      • matteo soresini says:

        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

Leave a Reply

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