Pure CSS Foundation Accordion Container

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

Accordion 1

Panel 1. Lorem ipsum dolor
Nowhere to Go
Accordion 2
Accordion 3
Type your name!

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/foundation-sites@6.5.0-rc.4/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:

Chromium 69.0.3497.81 on Ubuntu 18.04 (64-bit)
Foundation for Sites 6.5.0-rc.4

References:

[1]	Pure CSS Toggle (Show/Hide) HTML Element

[2]	Pure CSS Bootstrap Modal

[3]	Pure CSS Tab Panel

[4]	Pure CSS Accordion (Collapsible Content)

[5]	[Vue.js] Bulma Accordion (Collapsible Content)

[6]	Pure CSS Bulma Accordion (Collapsible Content)

[7]	Pure CSS Semantic UI Standard Accordion

[8]	Pure CSS Bootstrap Accordion

[9]	Evaluating CSS Frameworks — Bootstrap vs Bulma vs Foundation vs Milligram vs Pure vs Semantic vs UIKit