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

A Simple Smooth Horizontal Scroller Component for Vue | vue3-marquee

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