Acordeón súper liso con CSS puro/CSS3

Vista prévia

Descripción

Un componente de acordeón súper suave de CSS basado en transiciones CSS3 y : hover selector. Sin dependencias como jQuery.

Funcionamiento

La estructura HTML.

<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>

Los estilos CSS primarios.

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