How to Create Expand and Collapse List Item Using jQuery

Expand and Collapse is ideal for selective displaying information. it is frequently used in websites. It will let users to control, how the content is shown or hidden in the page. Today We are going to look how to create expand and collapse using jquery.

We will start with the markup


<li class="category">Design 
<li>Graphic Design</li> 
<li class="category">Web Design 
<ul> <li>HTML</li> 
<li class="category">Development 

 Without applying any style or jQuery code, the HTML file on execution displays the unordered list with its respective list items like this,


Now we will start our jquery code.

I have created expandcollapse.js into js folder. All of our jQuery code will go into this javascript file.

Download the Followings:


<title>jQuery Expand Collapse List Item </title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/expandcollapsed.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />


Then we will add our javascript into the "expandcollapse.js" file. Add the following code into sort.js file file.


$(document).ready(function() { 
$('li.category').addClass('plusimageapply'); $('li.category').children().addClass('selectedimage'); $('li.category').children().hide(); 
$('li.category').each( function(column) { 
if (this == { 
if($(this).is('.plusimageapply')) { 
$(this).removeClass('plusimageapply'); $(this).addClass('minusimageapply'); 
} else { 
$(this).removeClass('minusimageapply'); $(this).addClass('plusimageapply'); 
} ); 


Styling with CSS

list-style-image:url(../Images/plus.png); cursor:pointer; } 
.minusimageapply{ list-style-image:url(../Images/minus.png); cursor:pointer; } 
.selectedimage{ list-style-image:url(../Images/selected.png); cursor:pointer; }


The css style "plusimageapply" will be applied to all the list items (in collapsed mode) that have a nested unordered list.

The css3 spec specifies that the list-item can modify using the pseudo-element "marker", unfotunatly no browser support for that. So we replace the bullet symbol with the image using list-style-image

Similarly, the style rule minusimageapply will be applied to all the list items in expanded mode, and it contains the list-style-image property set to url to display a minus icon on the left of the list items. The style rule selectedimage will be applied to all of the list items that do not have unordered list nested in them

Now looking at our jQuery code, all the list items of the class category (those that have unordered list items nested in them) the style rule plusimageapply will be applied, making a plus icon to appear on their left. To all the rest of the list items (that do not have nested list items in them), the style rule selectedimage will be applied.

We initially make all the nested elements of the list items (that have unordered list items in them) invisible. That is, we make all the list items that have unordered list items in them appear in collapsed mode.

To apply the expand functionality, we attach a click event to each of the list items (that has an unordered list item in it), one by one. In the event handler, we check whether the list item on which the click event has occurred has the style rule plusimageapply applied to it. If it does, we display the hidden contents of the list item.

We then remove the style properties of style rule plusimageapply and apply the style properties of the style rule minusimageapply to replace the plus icon with the minus icon for the expanded list items. If the list item that was clicked has a minus icon on its left that is, if the style rule plusimageapply is not applied to it we hide the nested contents. We also remove the style properties of style rule minusimageapply and apply the style properties of the style rule plusimageapply to replace the minus icon with the plus icon for the list items that is in collapsed mode (we need to collapse the list item that has the minusimageapply style rule applied on it and is clicked).

See the Demo

You may also like:

How to Allow Only Numeric Value Using jQuery

How to Disable Certain Field using jQuery

How to Check All Checkboxes Using jQuery

How to Paginating a Table Using jQuery

How to Filter on Any Column of a Table Using jQuery

How to Sort Items Using jQuery

How to Implement Toggle Search Box in jQuery

Leave your comments

Post comment as a guest

terms and condition.

People in this conversation

Load Previous Comments
  • This has been super helpful. Thanks for the light code!

    4 Like Short URL:
  • thank you for the tutorial, works fine. But if I add something like Design, due to css design then the code fails to do the desired tasks. So, I am using jQuery Accordion widgets

    1 Like Short URL:
  • Guest (Sachin)

    It is a very nice tutorial, but can you also provide the plus and minus images?

    3 Like Short URL:
  • Guest (Maria)

    bhurls,<br /><br />I am not familiar with Javascript. How would you code toggleClass() in the code provided above in this article?<br /><br />Thanks!

    1 Like Short URL:
  • You could also use toggleClass() to switch between a default

    0 Like Short URL:
  • Guest (Maria)

    Hello,<br /><br />I have been using this code for my internship assignment. One problem I keep on having is after I click on the minus so it can change back to plus, the words next to it disappears.<br /><br />Is anyone experiencing the same problem? Any solutions? Please let me know.<br /><br />Thanks!

    1 Like Short URL:
  • Hi great work, I tried a few more improvements, works fine.<br /><br />In order to ensure that the first section is opened. Oh yes, and the opening and closing animation.<br /><br />To see:<br /><br /><br /><br /> regards<br /><br /> Werner

    1 Like Short URL:
  • Guest (Rehman)

    Hi <br /><br />i am running this code on mac osx, every thing works great but selectedimage is never loaded, minusimageapply is applied to all of the list items that do not have unordered list nested in them. <br /><br /><br /> - - [17/Jul/2011:12:12:04 +0530] "GET /bro/test1.html HTTP/1.1" 200 828<br /> - - [17/Jul/2011:12:12:05 +0530] "GET /bro/css/style.css HTTP/1.1" 304 -<br /> - - [17/Jul/2011:12:12:05 +0530] "GET /bro/js/expandcollapsed.js HTTP/1.1" 304 -<br /> - - [17/Jul/2011:12:12:05 +0530] "GET /bro/js/jquery-1.4.4.min.js HTTP/1.1" 304 -<br /> - - [17/Jul/2011:12:12:05 +0530] "GET /bro/Images/plus.png HTTP/1.1" 304 -<br /><br /><br />as you can see the select.png is never loaded. Plz advise

    2 Like Short URL:
  • Guest (ezhhhhh)

    Thanx for great article!!!

    2 Like Short URL:
  • this is useful Expand and Collapse List Item Using jQuery...<br />

    1 Like Short URL: