Paneles de acordeón verticales lisos con Pure JS y CSS3

Vista prévia

Descripción

Un enfoque puro de JavaScript/HTML5/CSS para crear un acordeón vertical con efectos deslizantes suaves basados en transiciones CSS3.

Funcionamiento

Cree la estructura HTML para el acordeón.

<section class="accordion">


<article class="accordion-panel">


<a class="accordion-panel__heading" href="javascript:;">Accordion Panel One</a>


<div class="accordion-panel__content">



<h4>Title One</h4>



<p>Description One</p>


</div>

</article>


<article class="accordion-panel">


<a class="accordion-panel__heading" href="javascript:;">Accordion Panel Two</a>


<div class="accordion-panel__content">



<h4>Title Two</h4>



<p>Description Two</p>


</div>

</article>


<article class="accordion-panel">


<a class="accordion-panel__heading" href="javascript:;">Accordion Panel Three</a>


<div class="accordion-panel__content">



<h4>Title Three</h4>



<p>Description Three</p>


</div>

</article>


...

</section>

Estilo del acordeón en el CSS.

.accordion {

border-radius: 3px;

overflow: hidden;

border: 3px solid #6495ED;
}

.accordion-panel {

border: 0px #6495ED solid;

transition: all .6s .2s ease;
}

.accordion-panel.active {

transition: all .2s .6s;

border-left: 15px #6495ED solid;
}

.accordion-panel__heading {

padding: 20px;

display: block;

text-decoration: none;

text-transform: uppercase;

letter-spacing: 2px;

color: #6495ED;

background: #f5f5f5;

font-family: 'Source Sans Pro', sans-serif;

font-size: 12px;

font-weight: 600;

border-bottom: 1px solid #6495ED;

transition: all .6s;

cursor: pointer;
}

.accordion-panel__heading:HOVER {

color: #333;

background: #f1f1f1;

transition: all .2s;
}

.active .accordion-panel__heading:HOVER,
.active .accordion-panel__heading {

color: #333;

background: #fff;

border-bottom: 0;
}

.accordion-panel__content {

padding: 0 20px 0 20px;

background: #f1f1f1;

max-height: 0;

overflow: hidden;

transition: all .6s;
}

.active .accordion-panel__content {

max-height: 500px;

padding: 0 20px 20px 20px;

background: #fff;
}

El JavaScript para habilitar el acordeón. Incluya el myAPP. js directamente en el documento.

<script src="myAPP.js"></script>