, when you click the title, you can flex the navigation bar, simplify the content, or display more content.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<script language= "javascript" type= "Text/javascript" src= "Jquery-1.8.3.min.js" >
</script>
<style type= "Text/css" >
BODY{FONT-SIZE:13PX}
#divFrame {border:solid 1px #666; Width:301px;overflow:hidden}
#divFrame. Clshead{background-color: #eee;p Adding:8px;height:18px;cursor:hand}
#divFrame. Clshead H3{padding:0px;margin:0px;float:left}
#divFrame. Clshead span{float:right;margin-top:3px}
#divFrame. clscontent{padding:8px}
#divFrame. Clscontent ul{list-style-type:none;margin:0px;padding:0px}
#divFrame. Clscontent ul li{float:left;width:95px;height:23px;line-height:23px}
#divFrame. clsbot{float:right;padding-top:5px;padding-bottom:5px}
. Getfocus{background-color: #eee}
</style>
<script type= "Text/javascript" >
$ (function () {//Page load Event
$ (". Clshead"). Click (function () {//Picture Click event
if ($ (". Clscontent"). Is (": visible")) {//if content is visible
$ (". Clshead span img"). attr ("src", "images/a1.gif"); Change Picture
$ (". Clscontent"). CSS ("display", "none"); Hide Content
}else{
$ (". Clshead span img"). attr ("src", "images/a2.gif"); Change Picture
$ (". Clscontent"). CSS ("Display", "block");//display content
}
});
$ (". Clsbot > A"). Click (function () {//Hotspot link Click event
if ($ (". Clsbot > A"). Text () = "simplified") {//If the content is ' simplified '
$ ("UL Li:gt (4): Not (: last)"). Hide (); The element that hides the index number greater than 4 and is not the last item
$ (". Clsbot > A"). Text ("more"); Change the character content to "more"
}else{
$ ("UL Li:gt (4): Not (: last)"). Show (). addclass ("GetFocus"); Displays the selected element and adds a style
$ (". Clsbot > A"). Text ("simplified"); Change the character content to "simplified"
}
});
});
</script>
</HEAD>
<BODY>
<div id= "Divframe" >
<div class= "Clshead" >
<span></span>
</div>
<div class= "Clscontent" >
<ul>
<li><a href= "#" > Novel </a><i> (1110) </i></li>
<li><a href= "#" > Literature </a><i> (230) </i></li>
<li><a href= "#" > Youth </a><i> (1430) </i></li>
<li><a href= "#" > Children </a><i> (1560) </i></li>
<li><a href= "#" > Life </a><i> (870) </i></li>
<li><a href= "#" > Social Sciences </a><i> (1460) </i></li>
<li><a href= "#" > Management </a><i> (1450) </i></li>
<li><a href= "#" > Computer </a><i> (1780) </i></li>
<li><a href= "#" > Education </a><i> (930) </i></li>
<li><a href= "#" > Reference book </a><i> (3450) </i></li>
<li><a href= "#" > introduced edition </a><i> (980) </i></li>
<li><a href= "#" > Other Classes </a><i> (3230) </i></li>
</ul>
</div>
<div class= "Clsbot" >
<a href= "#" > Simplification </a>
</div>
</div>
</BODY>
</HTML>
