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:

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

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

jQuery Expand Collapse with Plus Minus

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!

You Might Interested In


  1. Jared Wilcox says:

    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,

    1. Amit Sonkhiya says:


      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(‘[ – ]‘);

      1. MattSwinehart says:

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

        // Change [ + ] with [ – ] and ‘expand’ class with ‘collapse’ class and sliding content downward
        $(‘.accord ul’).on(‘click’, ‘li.expand span’, function (e) {

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

        1. Amit Sonkhiya says:

          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(‘[ – ]’);


          $(‘.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/

          1. MattSwinehart says:

            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.

          2. Amit Sonkhiya says:

            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

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.