jQuery Expand Collapse with Plus Minus

Here is a simple jQuery Expand Collapse plug-in available to download. We have used plus/minus sign to expand/collapse content in this example and you can change them easily. Moreover You can use nesting at any level. Clicking on anchor text to the left will take you to linked page/section. The final output will look like this:

jQuery Expand Collapse with Plus Minus

You can see the working example here or download the source.

Let’s see how to create this jQuery Expand Collapse plug-in.

Step 1: HTML Markup

Write the following html code inside body tag of your page:

Here you can see we have used nested ul and li tags to create nesting.

Step 2: Styling

For formatting purpose we have written the following CSS rules in our style.css file and linked the file in head section of our page.

You can alter the CSS to match with look and appearance of plug-in with your website.

Step 3: Add jQuery

All JavaScript code requires jQuery. So include jQuery in our page if you don’t have already. We have added jquery-1.11.1.min.js just before end of body tag of our page and it’s included in download.

Step 4: Call the Function

The last part remaining to do is calling the JavaScript function. So add the following code just after the jQuery file you included in step 3.

The script contains comments explaining which jQuery actions are being performed.

You can see the working example here or download the source.

Here we saw how much is it easy to create a jQuery Expand Collapse with a few lines of JavaScript code. In this example we have used plus and minus keys of keyboard to expand and collapse. You can use any other keys, HTML special characters or font icon with a little modification in JavaScript. Comments, suggestions or questions are most welcome!

Like this Post? Share
  • MattSwinehart

    I really like this! How can I set it to be open/expanded initially when the page loads?

    • Amit Sonkhiya

      Hi,

      you need to change for expanded on page load:

      $(‘.accord ul li:has(ul)’).addClass(‘expand’).find(‘ul’).hide();
      // Add ‘[ + ]‘ after anchor inside ‘li’ tags those have ‘expand’ class
      $(‘.accord ul li.expand>a’).after(‘[ + ]‘);

      replace them with

      $(‘.accord ul li:has(ul)’).addClass(‘collapse’);$(‘.accord ul li.collapse>a’).after(‘[ – ]‘);

      • MattSwinehart

        Thanks – any idea what I’ve done wrong? The page is here http://crownsportscenter.mattswinehart.com/parties with the expanding content on the right side.

        The code is here

        jQuery(document).ready(function ($) {
        // Add ‘expand’ class to ‘li’ tags having ‘ul’ tag inside them and initially hiding content
        $(‘.accord ul li:has(ul)’).addClass(‘collapse’);
        $(‘.accord ul li.collapse>a’).after(‘[ – ]’);

        // Change [ – ] with [ + ] and ‘collapse’ class with ‘expand’ and sliding content upward
        $(‘.accord ul’).on(‘click’, ‘li.collapse span ‘, function (e) {
        $(this).text(‘+’).parent().addClass(‘expand’).removeClass(‘collapse’).find(‘>ul’).slideUp();
        e.stopImmediatePropagation();
        });

        // Change [ + ] with [ – ] and ‘expand’ class with ‘collapse’ class and sliding content downward
        $(‘.accord ul’).on(‘click’, ‘li.expand span’, function (e) {
        $(this).text(‘-‘).parent().addClass(‘collapse’).removeClass(‘expand’).find(‘>ul’).slideDown();
        e.stopImmediatePropagation();
        });

        // Preventing rest of handlers from being execute
        $(‘.accord ul’).on(‘click’, ‘li.collapse li:not(.collapse)’, function (e) {
        e.stopImmediatePropagation();
        });
        });

        • Amit Sonkhiya

          Hello Matt,

          There is a little modification required. Replace the second line I sent yesterday with this one (It’s also there in your code):
          $(‘.accord ul li.collapse>a’).after(‘[ – ]’);

          with

          $(‘.accord ul li.collapse>a’).after(‘[ – ]‘);

          =========================

          I have tested the code & it will work for you. I would appreciate you if you allow us to buy a cup of coffee for our efforts. Link to donate: http://fellowtuts.com/buy-us-a-cup-of-coffee/

          • MattSwinehart

            Thanks – but it seems like I’m still getting the same result. The code looked the same as before but I could have missed something. I will gladly make a donation if there’s any way to get this working.

          • Amit Sonkhiya

            Sorry Matt, actually our comment form filtered span tags. The code is here

            $(‘.accord ul li.collapse>a’).after(‘<span>[ – ]</span>’);

            Also I have sent you email from support@fellowtuts.com

            Happy Diwali from India

          • MattSwinehart

            Thanks again for all your help! It works now!

  • Jared Wilcox

    Hello, thank you for the tutorial. The functionality is exactly what I am looking for, however, I can’t get it to work properly.

    I have the Javascript installed, the styles in my css, and the html on a test page exactly as you have done it. Everything looks right when the page loads, but when I click on any of the plus signs, the div just disappears.

    You can test it out here: http://forestlakechev.staging.wpengine.com/inventory/New/

    Your help would be greatly appreciated.

    Thank you,
    Jared

    • Jared Wilcox

      Nevermind, I found a solution that works. Thanks anyway!