console
<div class="first">
<div id="a">
<h2><a href="#a">Second Accordion heading</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi commodi consequatur deleniti dignissimos, doloribus eos error, harum iste natus necessitatibus perferendis, perspiciatis quasi qui quo quod quos reprehenderit tempora voluptatum.</p>
</div>
<div id="b">
<h2><a href="#b">Second Accordion heading</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aperiam aspernatur, blanditiis consequuntur cum dicta dolorem ea est in iste minus odio officiis quia quis rerum saepe tempora vel voluptates.</p>
</div>
<div id="c">
<h2><a href="#c">Second Accordion heading</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dicta, facere illo in quas rem sequi ut voluptatibus! Cum dolorem doloribus maxime neque officia! Distinctio dolor ipsa nam nisi rem?</p>
</div>
</div>
.first
{
width:960px;
margin: 0 auto;
border: 1px solid rgb(221,221,221);
}
.first h2
{
width: 960px;
height:80px;
background-color:rgb(56,204,122);
margin: 0;
text-align: center;
line-height: 80px;
position: relative;
transition-duration: 0.6s;
}
.first h2 a
{
display: inline-block;
width: 960px;
font-size: 15px;
color: white;
text-decoration: none;
transform: rotateX(0deg);
}
.first h2:after
{
border: 10px solid #fff;
border-color: #ffffff transparent transparent;
content: "";
height: 0;
position: absolute;
left: 50px;
top: 40px;
width: 0;
transform: rotate(-90deg);
transition-duration: 0.5s;
}
.first :target h2,
.first h2:focus,
.first h2:hover,
.first h2:active
{
background: rgb(43,166,89);
transform: rotateX(0deg);
}
.first :target h2,
.first :target a
{
transform: rotateX(180deg);
}
.first p
{
width:960px;
height: 0px;
overflow: hidden;
background-color: rgb(238,238,238);
margin: 0px;
transition-duration: 0.7s;
border-bottom: 2px solid rgb(48,187,100);
}
.first :target p
{
height: 230px;
overflow: auto;
}
.first :target h2:after
{
transform: rotate(-180deg);
}