CSS solo componente de acordeón vertical-nl-acordeón

Vista prévia

Descripción

Una implementación HTML/CSS pura del componente de acordeón vertical para el contenido web plegable & contraíble. Funciona en navegadores modernos que tienen soporte de transición CSS3.

Funcionamiento

Coloque el CSS principal nl-Accordion. CSS en el encabezado de la página HTML.

<link href="css/nl-accordion.css" rel="stylesheet">

Crear una lista de elementos de acordeón y utilizar entradas de radio HTML para activar y desactivar.

<div id="myAccordion" class="nl-accordion">

<ul>


<li>



<input type="radio" id="nl-radio-1" name="nl-radio" class="nl-radio" />



<label class="nl-label" for="nl-radio-1">Title&nbsp;One</label>



<div class="nl-content">




<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>




<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>



</div>


</li>


<li>



<input type="radio" id="nl-radio-2" name="nl-radio" class="nl-radio" />



<label class="nl-label" for="nl-radio-2">Title&nbsp;Two</label>



<div class="nl-content">




<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>




<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>



</div>


</li>


<li>



<input type="radio" id="nl-radio-3" name="nl-radio" class="nl-radio" />



<label class="nl-label" for="nl-radio-3">Title&nbsp;Three</label>



<div class="nl-content">




<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>




<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>



</div>


</li>


<li>



<input type="radio" id="nl-radio-4" name="nl-radio" class="nl-radio" />



<label class="nl-label" for="nl-radio-4">Title&nbsp;Four</label>



<div class="nl-content">




<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem luctus porttitor vestibulum, eros sapien mattis libero, euismod congue neque nisi at ipsum. Mauris semper ipsum sit amet metus semper malesuada. Donec vel est justo, ac porta diam.</p>




<p>In ut est in orci commodo blandit. Cras rhoncus ultricies augue. Proin quam odio, venenatis ut tempus tristique, aliquet in velit. Pellentesque volutpat facilisis orci, ut congue mi rhoncus at. Nullam vehicula dignissim neque, sed rhoncus magna ultricies et.</p>



</div>


</li>

</ul>
</div>