The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> application of the navigation bar in the project </title>
<Script language = "javascript" type = "text/javascript" src = "Jscript/jquery-1.4.2.min.js"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (". Tit"). find ("span"). click (function (){
$ (This). toggleClass ("closeBtn2"). parent (). next (). slideToggle (); // hide content and switch between icons
});
$ (". ClsBot"). click (function (){
$ (This). parent (). find ("li: gt (4)"). toggle (); // hide or display a content index value greater than 4
})
})
</Script>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul li {list-style: none ;}
. Box {width: 400px; margin: 100px auto; border: 1px solid # ddd ;}
. Tit {background: #999; height: 30px; color: # fff; font-size: 14px; line-height: 30px; padding-left: 6px; position: relative ;}
. CloseBtn {background: url ("Images/a2.gif") no-repeat 0 0; width: 7px; height: 8px; position: absolute; right: 10px; top: 10px; display: block; text-indent:-9999px; cursor: pointer ;}
. CloseBtn2 {background: url ("Images/a1.gif") no-repeat 0 0 ;}
. Content {padding: 6px; font-size: 12px; overflow: hidden ;}
. Content li {float: left; width: 100px; height: 24px ;}
. Content li a {color: #999 ;}
. Content li a: hover {color: red ;}
. ClsBot {display: block; clear: both; background: url ("Images/a5.gif") no-repeat right 0; padding-right: 16px; float: right; width: 26px; cursor: pointer; color: blue ;}
</Style>
</Head>
<Body>
<Div class = "box">
<Div class = "tit">
<H2> book Category <Span class = "closeBtn"> close </span>
</Div>
<Div class = "content">
<Ul>
<Li> <a href = "#"> fiction </a> <I> (1110) </I> </li>
<Li> <a href = "#"> literature and art </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 Science </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 = "#"> tool book </a> <I> (3450) </I> </li>
<Li> <a href = "#"> imported version </a> <I> (980) </I> </li>
<Li> <a href = "#"> other classes </a> <I> (3230) </I> </li>
</Ul>
<Span class = "clsBot"> simplified </span>
</Div>
</Div>
</Body>
</Html>