jQuery Expand Collapse with Plus Minus

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.

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