Response title
This is preview!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My little accordion</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style type="text/css">
body {
font-family: Arial;
font-size: 12px;
}
a {
color: #333333;
text-decoration: none;
}
#mainmenu {
width: 300px;
}
#mainmenu ul {
list-style-type: none;
}
.firstlevel {
font-weight: bold;
border-bottom: 1px solid #333333;
padding-top: 5px;
padding-bottom: 15px;
}
.secondlevel {
font-weight: normal;
}
.lowlevel {
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("li").click(function(){
$(this).children("ul.lowlevel").show();
});
});
</script>
<div id="mainmenu">
<ul class="firstlevel">
<li><a href="#">Page 1</a>
<ul class="secondlevel">
<li><a href="#">Page 1 - 1</a>
<ul class="lowlevel">
<li><a href="#">Page 1 - 1 - 1</a>
<ul class="lowlevel">
<li><a href="#">Page 1 - 1 - 1 - 1</a></li>
<li><a href="#">Page 1 - 1 - 1 - 2</a></li>
<li><a href="#">Page 1 - 1 - 1 - 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Page 1 - 2</a>
<ul class="lowlevel">
<li><a href="#">Page 1 - 2 - 1</a></li>
</ul>
</li>
<li><a href="#">Page 1 - 3</a>
<ul class="lowlevel">
<li><a href="#">Page 1 - 3 - 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="firstlevel">
<li><a href="#">Page 2</a>
<ul class="secondlevel">
<li><a href="#">Page 2 - 1</a>
<ul class="lowlevel">
<li><a href="#">Page 2 - 1 - 1</a>
<ul class="lowlevel">
<li><a href="#">Page 2 - 1 - 1 - 1</a></li>
<li><a href="#">Page 2 - 1 - 1 - 2</a></li>
<li><a href="#">Page 2 - 1 - 1 - 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Page 2 - 2</a>
<ul class="lowlevel">
<li><a href="#">Page 2 - 2 - 1</a></li>
</ul>
</li>
<li><a href="#">Page 2 - 3</a>
<ul class="lowlevel">
<li><a href="#">Page 2 - 3 - 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$("li").click(function(){
$(this).children("ul.lowlevel").toggle();
});
});
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("li").click(function(){
$('ul.lowlevel').hide();
$(this).children('ul.lowlevel').show();
$(this).parents('ul.lowlevel').show();
return false;
});
});
</script>
© 2013 jQuery Foundation
Sponsored by and others.