<div id="accordion">
<div id="accordion">
<section id="item1">
<p class="pointer">▶</p><h1><a href="#">A long paragraph</a></h1>
<p>Pellentesque habitant... </p>
</section>
<section id="item2" class="ac_hidden">
<p class="pointer">▶</p><h1><a href="#">A medium paragraph</a></h1>
<p>Pellentesque habitant... </p>
</section>
<section id="item3" class="ac_hidden">
<p class="pointer">▶</p><h1><a href="#">Two short paragraphs</a></h1>
<p>Pellentesque habitant... </p>
<p>Pellentesque habitant... </p>
</section>
</div>
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
#accordion section, #accordion .pointer, #accordion h1, #accordion p {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#accordion {
margin-bottom:30px;
}
#accordion h1 {
line-height:1.2;
font-size:20px;
background-color:rgba(255,0,0,0.3);
margin:0;
padding: 10px 10px 10px 30px;
}
#accordion h1 a {
color:black;
}
#accordion section {
overflow:hidden;
height:220px;
border:1px #333 solid;
}
#accordion p {
padding:0 10px;
color:black;
}
#accordion section.ac_hidden p:not(.pointer) {
color:#fff;
}
#accordion section.ac_hidden {
height:44px;
}
#accordion .pointer {
padding:0;
margin:10px 0 0 6px;
line-height:20px;
width:13px;
position:absolute;
}
#accordion section:not(.ac_hidden) h1 {
background-color:rgba(255,0,0,0.7);
}
#accordion section:not(.ac_hidden) .pointer {
display:block;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
padding:0;
}
$(document).ready(function() {
$(document).ready(function() {
$("#accordion section h1").click(function(e) {
$(this).parents().siblings("section").addClass("ac_hidden");
$(this).parents("section").removeClass("ac_hidden");
e.preventDefault();
});
});