Pure CSS Foundation Accordion Container

October 18, 2018

CSS only toggle Foundation accordion container. No JavaScript required. Click the following texts of items to see demo.

The basic technique is the same as Pure CSS Tab Panel [3]. We need:

1 - Visible HTML label elements, which is the item title of accordion tab.

2 - Invisible HTML input radio elements, referenced by the label elements. The value of name attribute of these elements must be the same.

3 - Content of accordion tab, invisible in the beginning.

When users click on the visible label elements, which are accordion tab title, the corresponding input radio element is checked. We use CSS3 :checked selector to select corresponding accordion tab content, and make the selected content visible.

The complete source code is as follows:

HTML:

<!-- you can put the following line in your html head -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-VEEaOnBKVRoYPn4AID/tY/XKVxKEqXstoo/xZ6nemak= sha384-D46t32f421/hB30qwnim2pIcisNN5GU9+6m2Mfnd3dKpTSFidZLa08/1StEiCFId sha512-WkgzH8VKemDfwrp18r+wgbx+oHXOkfd2kJs7ocAXdGDgonXDXh88E90IRtRZRXtO0IHprxYHYlY14h+wyTsUDA==" crossorigin="anonymous">

<input type="radio" id="panel-1" name="accordion-select">
<input type="radio" id="panel-2" name="accordion-select">
<input type="radio" id="panel-3" name="accordion-select">

<ul class="accordion" data-accordion>
  <li class="accordion-item" data-accordion-item>
    <a class="accordion-title"><label for="panel-1">Accordion 1</label></a>
    <div class="accordion-content content-1" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a class="accordion-title"><label for="panel-2">Accordion 2</label></a>
    <div class="accordion-content content-2" data-tab-content>
      <textarea></textarea>
      <button class="button">I do nothing!</button>
    </div>
  </li>
  <li class="accordion-item" data-accordion-item>
    <a class="accordion-title"><label for="panel-3">Accordion 3</label></a>
    <div class="accordion-content content-3" data-tab-content>
      Type your name!
      <input type="text"></input>
    </div>
  </li>
</ul>

CSS:

input[name="accordion-select"], .panel-block {
  display: none;
}

/* the magic */
#panel-1:checked ~ .accordion > .accordion-item > .content-1,
#panel-2:checked ~ .accordion > .accordion-item > .content-2,
#panel-3:checked ~ .accordion > .accordion-item > .content-3 {
  display: block;
}

The magic is in last rule. We use :checked and general sibling selector (~) to make the user-selected accordion tab content visible.

Tested on: