به راحتی و با استفاده از ویژگی های height و transition می توانید انیمیشن slide down را پیاده سازی کنید و یک accordion با css بسازید.

فرض کنید کد html زیر را تعریف کرده ایم:

<div id="content"> 
  <a href="#nav"><span>Click Here</span></a>
  <div class="expandable" id="nav">
    <p>Cum enim magna parturient</p>
  </div>
  <a href="#nav2"><span>Click Here</span></a>
  <div class="expandable" id="nav2">
    <p>Cum enim magna parturient</p>
  </div>
</div> 

از کد css زیر برای پیاده سازی انیمیشن slide down استفاده کنید:

* { margin:0; padding:0; }
body { font-family: sans-serif;} 
#content { margin: 50px; } 
a { text-decoration: none; }  
 
.expandable {
  background: #fff;
  overflow: hidden;
  color: #000;   
  line-height: 50px;

  transition: all .5s ease-in-out;
  height: 0;
 }
 
 .expandable:target {
  height: 50px;
}