Home >

Accordion list without Javascript

Demo

Books by Iain M. Banks; click a section to toggle it:

The Wasp Factory (1984)
Walking on Glass (1985)
Canal Dreams (1989)
The Crow Road (1992)
A Song of Stone (1997)
The Quarry (2013)
Consider Phlebas (1987)
The Player of Games (1988)
Use of Weapons (1990)
Excession (1996)
Inversions (1998)
Look to Windward (2000)
Matter (2008)
Surface Detail (2010)
The Hydrogen Sonata (2012)
Against a Dark Background (1993)
Feersum Endjinn (1994)
The Algebraist (2004)
Transition (2009)
The State of the Art (1991)
The Spheres (2010)

Code

HTML

<div class="accordion">
  <section>
    <input type="checkbox" name="books" id="acc1" />
    <label for="acc1">Title goes here</label>
    <div class="content">
      Text goes here
    </div>
  </section>
  <section>
    <input type="checkbox" name="books" id="acc2" />
    <label for="acc1">Title goes here</label>
    <div class="content">
      Text goes here
    </div>
  </section>
  ...
</div>

CSS

.accordion > section > input {
  display: none;
}

.accordion > section > .content {
  display: none;
}

.accordion > section > input:checked ~ .content {
  display: block;
}

Notes

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element and both are children of the same parent element.

This general idea can be adapted for all sorts of applications.

Support

All major browsers.

Sources