纯css的accordion效果(代码分享)

<div class="aordion">
<div class="item">
<h3 class="title round">
<a href="#one">title one</a>
</h3>
<div id="one" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#two">title two</a>
</h3>
<div id="two" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#three">title three</a>
</h3>
<div id="three" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in </p>
</div>
</div>
</div><div class="aordion">
<div class="item">
<h3 class="title round">
<a href="#one">title one</a>
</h3>
<div id="one" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#two">title two</a>
</h3>
<div id="two" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#three">title three</a>
</h3>
<div id="three" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea modo consequat. Duis aute irure dolor in </p>
</div>
</div>
</div>

.round {
border-radius: 5px;
}
.aordion {
width: 500px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
padding: 5px;
border: 5px solid rgba(54,54,54,0.3);
position: absolute;
: 20px;
left: 50px;
}
.aordion .item {
margin-bottom: 5px;
}
.aordion .item:last-child {
margin-bottom: 0;
}
.aordion .title {
background:-moz-linear-gradient(, #eee, #dcdcdc, #dcdcdc, #dcdcdc);
}
.aordion .title > a{
height: 30px;
display:block;
line-height: 30px;
padding-left: 10px;
font-size: 15px;
color: #585858;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
text-decoration:none;
}
.aordion .title+.content {
height: 0;
padding: 0;
opacity: 0;
border: 1px solid #eee;
overflow-y: auto;
-moz-transition: all 0.2s linear;
}
.aordion .title+.content:target {
opacity: 1;
padding: 5px;
height: auto;
margin: 5px auto;
}
.aordion .content p {
margin-bottom: 5px;
color: #585858;
text-shadow: 0 1px 1px #dcdcdc;
}