CSS Only Vertical Accordion Component – nl-accordion

Category: Accordion , CSS & CSS3 | September 23, 2016
Author: noobards
Views Total: 1,725
Official Page: Go to website
Last Update: September 23, 2016
License: MIT

Preview:

CSS Only Vertical Accordion Component – nl-accordion

Description:

A pure HTML/CSS implementation of the vertical accordion component for collapsible & expandable web content. Works on modern browsers which have CSS3 transition support.

How to use it:

Place the main CSS nl-accordion.css in the header of the html page.

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

Create a list of accordion items and use html radio inputs to toggle them on and off.

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