jquery rotation display first small example

jquery rotation display first small example_jquery

WBOY

Release： 2016-05-16 18:26:56

Original

1103 people have browsed it

The effect is as shown in the picture below:
jquery rotation display first small example_jquery
Although I wrote it myself after reading the example (just think of it as an encouragement to yourself, come on!)
jquery

Copy code The code is as follows:

 
$(document).ready(function(){ 
var h3=$(".accordion h3"); 
$(".accordion h3:eq(0)").addClass("active");//1. First get the first H3 tag and add class; 
$(".accordion p:gt(0)").hide();//Hide all tags except the first p tag; 
h3.click(function(){ 
$(this).next("p").slideToggle("slow")//Find the next p tag to add animation, and find out whether its sibling nodes are displayed. If they are displayed, hide them 
.siblings("p :visible").fadeOut("slow"); 
$(this).toggleClass("active");//Add a class to the H3 tag (if there is one, add it if there is one), find the sibling nodes and remove them class 
$(this).siblings("h3").removeClass("active"); 
}); 
}); 

css

Copy code The 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 Code Code As follows:

Question One Sample Text

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. is Question Two

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. neque vitae odio. Vivamus vitae ligula.

Another Questio here

tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. ;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. p>

Sample Question Heading

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.
complete demo code: