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.
Step 1: HTML Markup
Write the following html code inside body tag of your page:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <div id="Accord" class="accord"> <ul> <li><a href="#">Example 1</a></li> <li><a href="#">Example 2</a> <ul class="sub"> <li> <a href="#">Example 2.1</a> <p class="pl-20"> It's an example of <b>Expand</b> | <b>Collapse</b>. You should place your content instead. </p> </li> </ul> </li> <li><a href="#">Example 3</a> <ul class="sub"> <li><a href="#">Example 3.1</a> <ul class="sub"> <li><a href="#">Example 3.1.1</a> <ul class="sub"> <li><a href="#">Example 3.1.1.1</a></li> </ul> </li> </ul> </li> <li><a href="#">Example 3.2</a> <ul class="sub"> <li> <a href="#">Example 3.2.1</a> <p class="pl-20"> It's an example of <b>Expand</b> | <b>Collapse</b>. You should place your content instead. </p> </li> <li><a href="#">Example 3.2.2</a></li> </ul> </li> </ul> </li> </ul> </div> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .accord ul, .accord ul li { list-style-type: none; } .accord ul li a { color: #6E440A; text-decoration: none; } .accord ul li a:hover { color: #523205; text-decoration: underline; } .accord ul li span { color: red; margin-left: 10%; /* Modify this value to update distance of +/- sign */ cursor: pointer; } .pl-20 { padding-left: 3%; } |
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.
1 | <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript"> 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('expand').find('ul').hide(); // Add '<span>[ + ]</span>' after anchor inside 'li' tags those have 'expand' class $('.accord ul li.expand>a').after('<span>[ + ]</span>'); // 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(); }); }); </script> |
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!
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
Nevermind, I found a solution that works. Thanks anyway!
I really like this! How can I set it to be open/expanded initially when the page loads?
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(‘[ – ]‘);
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();
});
});
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/
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.
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
Thanks again for all your help! It works now!