Home > Developer > JavaScript
Shows the effect:
After reading the example, I wrote it myself (just give myself an encouragement !)
Jquery
Copy codeThe Code is as follows:
$ (Document). ready (function (){
Var h3 = $ (". accordion h3 ");
$ (". Accordion h3: eq (0)"). addClass ("active"); // 1. first obtain the first H3 label and add class;
$ (". Accordion p: gt (0)"). hide (); // hide all tags except the first p tag;
H3.click (function (){
$ (This). next ("p"). slideToggle ("slow") // search for the next p tag to add an animation, and check whether its brother node is displayed. Hide it if it is displayed.
. Siblings ("p: visible"). fadeOut ("slow ");
$ (This). toggleClass ("active"); // Add a class to the H3 label (add a class if no class is added). Find the sibling node and remove the class.
$ (This). siblings ("h3"). removeClass ("active ");
});
});
Css
Copy codeThe Code is as follows:
Body {
Margin: 10px auto;
Width: 570px;
Font: 75%/120% Arial, Helvetica, sans-serif;
}
. Accordion {
Width: 480px;
Border-bottom: solid 1px # c4c4c4;
}
. Accordion h3 {
Background: # e9e7e7 url (images/arrow-square.gif) no-repeat right-51px;
Padding: 7px 15px;
Margin: 0;
Font: bold 120%/100% Arial, Helvetica, sans-serif;
Border: solid 1px # c4c4c4;
Border-bottom: none;
Cursor: pointer;
}
. Accordion h3: hover {
Background-color: # e3e2e2;
}
. Accordion h3.active {
Background-position: right 5px;
}
. Accordion p {
Background: # f7f7f7;
Margin: 0;
Padding: 10px 15px 20px;
Border-left: solid 1px # c4c4c4;
Border-right: solid 1px # c4c4c4;
}
Html
Copy codeThe Code is as follows:
<Div class = "accordion">
<H3> Question One Sample Text <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p>
<H3> This is Question Two <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p>
<H3> Another Questio here <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p>
<H3> Sample heading <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p>
<H3> Sample Question Heading <P> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p>
</Div>
Complete DEMO code:
<! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> <ptml> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = gb2312 "> <title> jquery rotation display </title> <style type =" text/css "> body {margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif ;}. accordion {width: 480px; border-bottom: solid 1px # c4c4c4 ;}. accordion h3 {background: # e9e7e7 url (images/arrow-square.gif) no-repeat right-51px; padding: 7px 15px; margin: 0; font: bold 120%/100% Arial, Helvetica, sans-serif; border: solid 1px # c4c4c4; border-bottom: none; cursor: pointer ;}. accordion h3: hover {background-color: # e3e2e2 ;}. accordion h3.active {background-position: right 5px ;}. accordion p {background: # f7f7f7; margin: 0; padding: 10px 15px 20px; border-left: solid 1px # c4c4c4; border-right: solid 1px # c4c4c4 ;} </style> </pead> <body> Question One Sample Text <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p> This is Question Two <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p> Another Questio here <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p> Sample heading <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p> Sample Question Heading <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. proin eget urna. nunc fringilla neque vitae odio. vivamus vitae ligula. </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
