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

HTML

<ul>
 <li class="category">Design
 <ul>
 <li>Graphic Design</li>
 <li class="category">Web Design
 <ul>
 <li>HTML</li>
 <li>CSS</li>
 </ul>
 </li>
 <li>Print</li>
 </ul>
 </li>
 <li class="category">Development
 <ul>
 <li>PHP</li>
 <li>Java</li>
 </ul>
 </li>
</ul>

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:

jquery-1.4.4.min.js

<head>
<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" />
</head>

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

Javascript

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

Styling with CSS

.plusimageapply{
 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

Comments

0 #14 navamani 2013-04-09 14:42

hi,

this article is really helpful to me

could you please send me a link where I can download the source code for this?

Thanks,
VNM

Quote

0 #13 Peter the Kraut 2012-10-19 08:01

Hi,

great work.

Instead of tagging every single li-element manually jQuery did this work for me before your scripts runs.

$('ul li').each(function() {
if ($(this).children().length > 0 ) {
$(this).attr('class', 'category');
}
});

Best regards
Peter

-3 #12 cowguurl 2012-04-19 05:25

Very easy to follow and implement. Many many thanks. :)

0 #11 HG 2012-03-28 08:14

Simple or not. You made it look like it really is so simple. Thanks.

+2 #10 anguissette1979 2011-12-06 02:10

This has been super helpful. Thanks for the light code!

0 #9 webdev 2011-11-30 12:05

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

+3 #8 Sachin 2011-11-26 14:39

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

-1 #7 Maria 2011-08-08 13:49

bhurls,

I am not familiar with Javascript. How would you code toggleClass() in the code provided above in this article?

Thanks!

-2 #6 bhurls 2011-08-07 21:44

You could also use toggleClass() to switch between a default

+1 #5 Maria 2011-08-03 17:40

Hello,

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.

Is anyone experiencing the same problem? Any solutions? Please let me know.

Thanks!

Refresh comments list
RSS feed for comments to this post

sendesignz