<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery show hide multiple rows</title>
<style type="text/css">
.ClassDetails{
width: 330px;
}
.ClassDetails ul li:first-child{
border: 0 none;
width: 100%;
}
.ClassDetails ul li{
display: block;
float: none;
margin: 0 0 10px 0;
}
.ClassDetails .LiLink{
background: url(../images/ClassDetailsLinkIcon.gif) no-repeat left 2px;
padding: 0 0 0 14px;
text-decoration: none;
}
.ClassDetails .LiLinkActice{
background: url(../images/LinkIconActive.gif) no-repeat -1px 4px;
}
.ClassDetails .LinkDesc{
padding: 8px 0 0 12px;
}
</style>
<script type="text/javascript">
//Make the default settings
$(".LinkDesc:not(:first)").hide();
$(".LinkDesc:first").show();
$(".ClassDetails ul li a").addClass("LiLinkActice");
//Show/hide next element after the link
$(".ClassDetails ul li a").click(function(){
$(this).toggleClass()"LiLinkActice");
var currentDescDiv= $(this).next();
$(".LinkDesc").hide(0, function(){
currentDescDiv.show();
});
});
</script>
</head>
<body>
<h4>Show Hide multiple rows with jQuery's $(this) function </h4>
<h4>This example has jquery 'not()' ':first' and '(this)' functions</h4>
<ul>
<li class="ClassDetails">
<ul>
<li>
<a href="#" class="LiLink">Title 1</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 2</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 3</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery show hide multiple rows</title>
<style type="text/css">
.ClassDetails{
width: 330px;
}
.ClassDetails ul li:first-child{
border: 0 none;
width: 100%;
}
.ClassDetails ul li{
display: block;
float: none;
margin: 0 0 10px 0;
}
.ClassDetails .LiLink{
background: url(../images/ClassDetailsLinkIcon.gif) no-repeat left 2px;
padding: 0 0 0 14px;
text-decoration: none;
}
.ClassDetails .LiLinkActice{
background: url(../images/LinkIconActive.gif) no-repeat -1px 4px;
}
.ClassDetails .LinkDesc{
padding: 8px 0 0 12px;
}
</style>
<script type="text/javascript">
//Make the default settings
$(".LinkDesc:not(:first)").hide();
$(".LinkDesc:first").show();
$(".ClassDetails ul li a").addClass("LiLinkActice");
//Show/hide next element after the link
$(".ClassDetails ul li a").click(function(){
$(this).toggleClass()"LiLinkActice");
var currentDescDiv= $(this).next();
$(".LinkDesc").hide(0, function(){
currentDescDiv.show();
});
});
</script>
</head>
<body>
<h4>Show Hide multiple rows with jQuery's $(this) function </h4>
<h4>This example has jquery 'not()' ':first' and '(this)' functions</h4>
<ul>
<li class="ClassDetails">
<ul>
<li>
<a href="#" class="LiLink">Title 1</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 2</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
<li>
<a href="#" class="LiLink">Title 3</a>
<div class="LinkDesc">
<p>Some text</p>
</div>
</li>
</ul>
</li>
</ul>
</body>
</html>
No comments:
Post a Comment