CSS Only Accordion

Another great example where we can make the web lean again.

Accordions don't even need to have fancy JavaScript plugins, surely we can do it really simple in Vanilla JavaScript, but sometimes it's best to even look at other solutions.

Today we will look into doing a CSS only Accordion with the input hack.

There are multiple ways of doing it with CSS only, today we will look into just the input hack.

HTML Setup for CSS only Accordion

For the HTML part we are going to use the following:

<div class="accordion"> <input type="checkbox" id="tab1" /> <label class="accordion-label" for="tab1">Item 1</label> <div class="accordion-content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis! </div></div>

This will generate one accordion for us, as you can see we use a checkbox and a label, the label will be our accordion title.

CSS for the Accordion

input { position: absolute; opacity: 0; z-index: -1;}.accordion { margin: 10px; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);}.accordion-label { display: flex; justify-content: space-between; padding: 1em; font-weight: bold; cursor: pointer; background: #333; color: #fff;}.accordion-content { max-height: 0; padding: 0 1em; background: white; transition: all 0.35s;}input:checked ~ .accordion-content { max-height: 100vh; padding: 1em;}

Let's loop through this in more detail step by step:

input { position: absolute; opacity: 0; z-index: -1;}

We don't really need the input visible so we give it a postion: absolute; and z-index: -1 to hide it, also do we set the opacity: 0 so it's not going to be visible to the user.

.accordion { margin: 10px; border-radius: 5px; overflow: hidden; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);}

For the main accordion styling we do some simple styling.

We set a margin of 10px to give it some space, then we make the corners rounded with border-radius: 5px;. Then we also set the overflow: hidden to not make the accordion content show before we click the label. Lastly we set a nice box-shadow to give it a clean effect.

.accordion-label { display: flex; padding: 1em; font-weight: bold; cursor: pointer; background: #333; color: #fff;}

The label we give a display: flex to make full width. Then we add some padding, make the font show bold and add a cursor: pointer, lastly we add some color to make it pop.

.accordion-content { max-height: 0; padding: 0 1em; background: white; transition: all 0.35s;}

We set the content div to have a max-height: 0 give it a small padding and add a transition to make it animated once it opens.

input:checked ~ .accordion-content { max-height: 100vh; padding: 1em;}

No for the magic, once the input is checked we set the max-height: 100vh (100% of the viewport) and add the overall padding to the content div.

The ~ is a general sibling selector it will select a sibling that follows the first one.

See the following Codepen for a demo:

See the Pen CSS Only Accordion by Chris Bongers (@rebelchris) on CodePen.

Or see this example a bit more styled and more options:

See the Pen Challenge #3 by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog, feel free to subscribe to my email newsletter and connect on Facebook or Twitter