Super Smooth Accordion with Pure CSS / CSS3

A CSS only super smooth accordion component based on CSS3 transitions and :hover selector. Without any dependencies like jQuery.

How to use it:

The html structure.

<div class="accordion">
  <div class="single-accordion">
    <h2>CSS3 Accordion - Segment # 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p> 
  </div>
  <div class="single-accordion">
    <h2>CSS3 Accordion - Segment # 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p> 
  </div>
  <div class="single-accordion">
    <h2>CSS3 Accordion - Segment # 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, vel minus velit distinctio doloribus vitae quod. Voluptatem, corporis qui aliquam laboriosam nam enim officiis a nihil saepe animi debitis molestias.</p> 
  </div>
  ...
</div>

The primary CSS styles.

.accordion {
  width: 650px;
  padding: 25px;
}
.single-accordion {
  height: 35px;
  overflow: hidden;
  background: #C0392B;
  color:#fff;
  margin-bottom: 5px;
  padding: 10px;
  -webkit-transition: all 1s;
}
.single-accordion:hover {
  height: 120px;
  border-radius: 10px;
  -webkit-transition: all 1s;
}
.single-accordion h2:hover { cursor: pointer; }
.single-accordion h2 {
  color: #ccc;
  font-size: 30px;
  font-variant: small-caps;
  line-height: 35px;
}
.single-accordion p {
  line-height: 25px;
  color: #fff;
  text-align: justify;
  padding: 10px;
}