I believe many people have seen the effect of the jquery accordion, jquery accordion effect in the display of Web content better use of the web space, appears unique. Let's take a look at how to achieve the jquery accordion effect in one step, the final effect is as follows:
First, let's look at the HTML tags, as follows:
| The code is as follows |
Copy Code |
<div id= "Accordion" >
<div class= "Item" >
<a target= "_blank" href= "#" ></a> "
<p></p>
</div>
<!--more item-->
</div> |
Obviously, the HTML used is quite straightforward. CSS styles are not given here, you can see the source files found in the demo page. Below we focus on the jquery Accordion Code implementation section. The jquery code is given directly as follows:
| The code is as follows |
Copy Code |
| $ (document). Ready (function () {
//Hide All item
$ ('. Item ') first. Hide ()
& nbsp; //Displays the first item
$ (". Item:first"). Show ();
$ ("#accordion H2 "). Click (function () {
//If current item is hidden
if ($ (this). Next (). Is (": hidden")) {
//Slideup All item
$ (". Item") first. Slideup ();
//slidedown Current Item
$ (this). Next (). Slidedown ();
}
});
}) |
The core code is finished, we can see the complete example
| The code is as follows |
Copy Code |
|
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Accordion Effect-jquery Online demo-jquery Learning </title>
<link href= "/stylesheet_min.css" rel= "Stylesheet" type= "Text/css"/>
<style type= "Text/css" >
#accordion {margin:0 auto;width:400px;}
#accordion h2{
Background: #0066FF 0 0;
Float:left;
font-size:18px;
Font-weight:normal;
height:30px;
line-height:30px;
margin:0 0 3px;
width:400px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#accordion H2 a{
Color:white;
Display:block;
font-size:16px;
Text-decoration:none;
padding-left:10px;
Outline:none;
}
#accordion H2 a:hover{
Color:yellow;
Cursor:pointer;
}
. current{
Color:yellow;
}
. item{
Clear:both;
margin:0 0 3px;
Overflow:hidden;
font-size:14px;
width:398px;
Background: #f0f0f0;
border:1px solid #CCC;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
. Item img{
Border:none;
Float:left;
margin:10px 5px 5px;
}
. Item p{
margin-top:5px;
padding:0 10px 0 135px;
}
</style>
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></ Script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
Hide All Item First
$ (". Item"). Hide ();
Show first item
$ (". Item:first"). Show ();
$ ("#accordion H2"). Click (function () {
If the current item is hidden
if ($ (this). Next (). Is (": hidden")) {
Slideup All Item First
$ (". Item"). Slideup ();
Slidedown Current Item
$ (this). Next (). Slidedown ();
}
return false;
});
})
</script>
<body>
<div id= "Page-wrap" >
<div id= "Content-wrap" >
<div id= "Content-left" class= "Demo" >
<div id= "Accordion" >
<div class= "Item" >
<a target= "_blank" href= "/jquery-use-opacity-show-focus.html" ></a>
<p> a few days ago on a web site to see the effect of using opacity, when the user's cursor resting on a picture, the rest of the picture to the translucent state, so that we stay in the eye when the </p>
</div>
<div class= "Item" >
<a target= "_blank" href= "/use-jquery-plugin-to-show-thumbnail-gallery.html" ></a>
<p> today, let's take a look at a jquery plugin that enables you to display thumbnail images and view large pictures. In this way, it is necessary to display a small figure when the picture displayed is very large </p>
</div>
<div class= "Item" >
<a target= "_blank" href= "/use-jquery-to-move-value-in-listbox.html" ></a>
<p>jquery Operation ListBox principle is not difficult, is to move the selected items in the listbox to achieve the moving effect we need. </p>
</div>
</div>
</div>
</body>
|
