It took a long time to write the accordion effect using js. Next I will introduce you to the jQuery accordion effect program code.
I believe many people have seen the effect of jQuery accordion. The effect of jQuery accordion makes better use of the webpage space when displaying webpage content, which is quite unique. Today, let's take a look at how to implement the jQuery accordion effect step by step. The final effect is as follows:
First, let's look at the html Tag, as shown below:
| The Code is as follows: |
Copy code |
<Div id = "accordion">
<H2> <a href = "#"> </a> <Div class = "item">
<A target = "_ blank" href = "#"> </a>
<P> </p>
</Div>
<! -- More item -->
</Div> |
It can be seen that the html used is quite clear. The CSS style is not provided here. You can view the source file on the Demo page. Next we will focus on the jQuery accordion code implementation section. The jQuery code is as follows:
| The Code is as follows: |
Copy code |
$ (Document). ready (function (){
// Hide all items first
$ (". Item"). hide ();
// Display the first Item
$ (". Item: first"). show ();
$ ("# Accordion h2"). click (function (){
// If the current Item is hidden
If ($ (this). next (). is (": hidden ")){
// SlideUp all items first
$ (". Item"). slideUp ();
// SlideDown the current Item
$ (This). next (). slideDown ();
}
});
}) |
After the core code is finished, we can see the complete instance.
| 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">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jQuery accordion effect-jQuery online demonstration-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 {
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 items first
$ (". Item"). hide ();
// Display the first Item
$ (". Item: first"). show ();
$ ("# Accordion h2"). click (function (){
// If the current Item is hidden
If ($ (this). next (). is (": hidden ")){
// SlideUp all items first
$ (". Item"). slideUp ();
// SlideDown the current Item
$ (This). next (). slideDown ();
}
Return false;
});
})
</Script>
</Head>
<Body>
<Div id = "page-wrap">
<Div id = "content-wrap">
<Div id = "content-left" class = "demo">
<Div id = "accordion">
<H2> <a href = "#"> jQuery Opacity image focusing effect </a> <Div class = "item">
<A target = "_ blank" href = "/jquery-use-opacity-show-focus.html"> </ a>
<P> you saw the Opacity effect on a website the previous day. When the user cursor stays on an image, the remaining images are changed to semi-transparent, let's stay tuned </p>
</Div>
<H2> <a href = "#"> jQuery Plugin-display image thumbnails </a> <Div class = "item">
<A target = "_ blank" href = "/use-jquery-plugin-to-show-thumbnail-gallery.html"> </a>
<P> today, let's see how to use a jQuery plug-in to display thumbnail images and view large images. In this way, when the displayed image is very large, it is necessary to display a small image </p>
</Div>
<H2> <a href = "#"> jQuery moves the value of listbox </a> <Div class = "item">
<A target = "_ blank" href = "/use-jquery-to-move-value-in-listbox.html"> </>
<P> it is not difficult for jQuery to operate on listbox. It is to move the selected items in listbox to achieve the desired moving effect. </P>
</Div>
</Div>
</Div>
</Body>
</Html> |
