Important Links: How to Create Expand and Collapse List Item Using jQuery

html

<ul id="category-tabs">
<li><a href="javascript:void"><i class="fa fa-plus-circle"></i>Category 1</a>
<ul class="child">
<li><a href="javascript:void">item 1</a></li>
<li><a href="javascript:void">item 2</a></li>
<li><a href="javascript:void">item 3</a></li>
</ul>
</li>
</ul>
css

ul
{
list-style-type: none;
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-plus-circle:before {
content: "\f055";
}
.fa-minus-circle:before {
content: "\f056";
}

jquery

$('#category-tabs ul').hide();

$('#category-tabs li a').click(function(){

$(this).next('ul').slideToggle('500');

$(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')

});

-----------------------------------------

html

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

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

jquery

$(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'); 

} 

} 

}); 

} ); 

});

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; }

Important Links

Saturday, June 6, 2015

How to Create Expand and Collapse List Item Using jQuery

No comments:

Post a Comment