August 7, 2022

Pure CSS Accordion Which Works Without Javascript

Pure-CSS-Accordion is an accordion that works without javascript. 0% JavaScript, 100% CSS.

vertical horizontal accordion, horizontal accordion menu, multi level accordion menu, accordion menu jquery, accordion menu examples

Features

  • No JavaScript involved
  • Lightweight (~4KB)
  • Complies with W3C standards for HTML5 and CSS3

How to make use of it:

Put 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 the HTML radio input 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>

CSS Only Vertical Accordion Component Plugin/Github


See Demo And Download

Official Website(noobards): Click Here

This superior jQuery/javascript plugin is developed by noobards. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.