Expand and collapse icon tree using css and javascript
In this article, we have design the expand and
collapse icon tree using pure css and java script. Many times we need to show
menu tab according to expand and collapse properties.
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="ExpandCollapseIconsTree.aspx.cs"
Inherits="ExpandCollapseIconsTree" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Expand/Collapse
Tree </title>
<style type="text/css">
#country,
#country ul
{
list-style-type:
none;
margin-left:
15px;
margin-bottom:
5px;
padding-left:
20px;
cursor:
pointer;
}
.icon
{
background:
transparent url('plus-minus.png'
) no-repeat left
top;
display:
block;
height:
12px;
width:
12px;
float:
left;
cursor:
pointer;
}
.plus
{
background-position:
left top;
margin-top:
3px;
}
.minus
{
background-position:
left -10px;
margin-top:
3px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function
() {
$('#country
ul')
.hide(400)
.parent()
.prepend('<span class="icon plus"></span>');
$('#country
li').on('click', function (e) {
e.stopPropagation();
$(this).children('ul').slideToggle('slow',
function () {
if
($(e.target).is("span")) {
$(e.target)
.toggleClass('minus', $(this).is(':visible'));
}
else
{
$(e.target).children('span')
.toggleClass('minus', $(this).is(':visible'));
}
});
});
$('#country
a').not('[href="#"]').attr('target', '_blank');
});
</script>
</head>
<body>
<ul id="country">
<li class="level1">Country A
<ul>
<li class="level2">StateA1
<ul>
<li><a href="#">CityA1</a></li>
<li><a href="#">CityA1</a></li>
</ul>
</li>
<li class="level2">StateA2
<ul>
<li><a href="#">CityA2</a></li>
<li><a href="#">CityA2</a></li>
</ul>
</li>
<li class="level2">StateA3
<ul>
<li><a href="#">CityA3</a></li>
<li><a href="#">CityA3</a></li>
<li><a href="#">CityA3</a></li>
</ul>
</li>
<li class="level2">StateA4
<ul>
<li class="level3">CityA3
<ul>
<li><a href="#">localarea1</a></li>
<li><a href="#">localarea1</a></li>
</ul>
</li>
<li class="level3">CityA4
<ul>
<li><a href="#">localarea1</a></li>
<li><a href="#">localarea1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="level1">Country B
<ul>
<li><a href="#">StateB1</a></li>
<li><a href="#">StateB1</a></li>
<li><a href="#">StateB1</a></li>
</ul>
</li>
<li class="level1">Country C
<ul>
<li><a href="#">StateC1</a></li>
<li><a href="#">StateC1</a></li>
</ul>
</li>
</ul>
</body>
</html>
Out-Put:-
Expand and collapse icon tree using css and javascript
Reviewed by NEERAJ SRIVASTAVA
on
1:04:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
1:04:00 PM
Rating:
No comments: