jquery rotation display first small example_jquery

The effect is as shown in the picture below:

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:

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>jquery 杞</title>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn