1 Thing A Week 1 Thing
A Week

How to build a pure CSS accordion Having discovered the :target pseudo-class, it got me thinking...

Week 172.0 — 8th February '21

I had this topic in mind, but planned to build it using CSS and vanilla JS as follow up to an article from a few months ago where I built pure CSS tabs and carousels. Then this past week I came across an article about pure CSS tabs making use of the :target pseudo class and my mind is blown.

The demo

Jumping straight into it, here's the demo with the markup and SCSS I used to create the simple layout:

The explanation

The important bit is making use the of the :target pseudo-class. Here's a dt element containing a link that takes you to the element with the id #first.

<dt id="first"><a href="#first">First heading</a></dt>

In my case there's effectively one and the same thing. The parent element has the ID we're looking for but this could be anywhere on the page. If this was a carousel, perfect for highlighting the current tab!

As for the CSS, we simply take the highlighted dt and reveal the adjacent dd which contains the content for that part of the accordion.

&:target {
    + dd {
        display: block;
    }
}

My deme is a little more complicated because I've added rounded borders and tried to cater for various browser quirks when it comes to the border-radius property. Browser support is pretty good for the :target pseudo-class so not too much to worry about there.

The one drawback I've found is that there's no obvious way to do this with just CSS. With a bit of JavaScript you could remove the target from the URL but in that case I'd not bother with a pure CSS solution and just do it with a minimal amount of vanilla JavaScript.

I also haven't catered for the scenario where you would want to allow for the entire accordion to be open or to have a default open. The later could be solved with a bit of additional CSS, but the former would require JavaScript again as far as I can see.

CSS FTW!

More from 1 Thing A Week
« How my portfolio website evolved over the past 16 years Improving your iPhone's Do Not Disturb car mode Using HTML's details tag »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 172.1 – Monday
    1. Apollo 14 heads home Apollo 14, NASA, JSC, ASU, and Andy Saunder on apod.nasa.gov
    2. YouTube Discontinuing 3rd-Generation Apple TV App, AirPlay Still Available macrumors.com
    3. Passive house explained in 90 seconds Hans-Jörn Eich on youtube.com
  2. 172.2 – Tuesday
    1. Live Music Jukebox pudding.cool
    2. Facebook says it will crack down on COVID vaccine misinformation axios.com
    3. "Amend: The Fight for America" trailer Netflix on youtube.com
  3. 172.4 – Thursday
    1. Audi E-Tron GT blessthisstuff.com
  4. 172.5 – Friday
    1. Cygnus Mosaic 2010-2020 J-P Metsavainio on apod.nasa.gov

Jump to notable items for Week #171, Week #173 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit