css中注意下:target和transition部分就大致清楚了.代码中css的prefix为了简明只用了-moz-:target定位的元素对应于浏览器url最后的#xxx,xxx是元素的id,我们通过点击标题链接实现切换功能。以下是jsfiddle中得实际效果（firefox浏览或者修改css前缀）

<div>

<div>

<h3>

<a href="#one">title one</a>

</h3>

<div id="one">

<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 commodo consequat. Duis aute irure dolor in </p>

</div>

</div>

<div>

<h3>

<a href="#two">title two</a>

</h3>

<div id="two">

<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 commodo consequat. Duis aute irure dolor in </p>

</div>

</div>

<div>

<h3>

<a href="#three">title three</a>

</h3>

<div id="three">

<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 commodo consequat. Duis aute irure dolor in </p>

</div>

</div>

</div><div>

<div>

<h3>

<a href="#one">title one</a>

</h3>

<div id="one">

<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 commodo consequat. Duis aute irure dolor in </p>

</div>

</div>

<div>

<h3>

<a href="#two">title two</a>

</h3>

<div id="two">

<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 commodo consequat. Duis aute irure dolor in </p>

</div>

</div>

<div>

<h3>

<a href="#three">title three</a>

</h3>

<div id="three">

<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 commodo consequat. Duis aute irure dolor in </p>

</div>

</div>

</div>

css:

.round {

border-radius: 5px;

}

.accordion {

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;

top: 20px;

left: 50px;

}

.accordion .item {

margin-bottom: 5px;

}

.accordion .item:last-child {

margin-bottom: 0;

}

.accordion .title {

background:-moz-linear-gradient(top, #eee, #dcdcdc, #dcdcdc, #dcdcdc);

}

.accordion .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;

}

.accordion .title+.content {

height: 0;

padding: 0;

opacity: 0;

border: 1px solid #eee;

overflow-y: auto;

-moz-transition: all 0.2s linear;

}

.accordion .title+.content:target {

opacity: 1;

padding: 5px;

height: auto;

margin: 5px auto;

}

.accordion .content p {

margin-bottom: 5px;

color: #585858;

text-shadow: 0 1px 1px #dcdcdc;

}

【纯css的accordion效果(代码分享)】相关文章：

★ 利用CSS3实现圆角的outline效果的教程

★ 纯css实现的tab切换效果

★ 一款纯css实现的垂直时间线效果

★ 文字环绕图片的布局效果

★ 用css实现透视效果

★ css实现文字层浮在图片之上示例代码

★ 京东装修的耳朵代码

★ css中的框架模

★ CSS3制作loading加载动画效果代码

★ 实现CSS3中的border-radius(边框圆角)示例代码