CSS Only Accordion
Tags: css
Published: 2020-04-20 07:53:46

---
title: CSS Only Accordion
published: true
date: 2020-04-17 03:00:00 UTC
tags: css
canonical_url: https://daily-dev-tips.com/posts/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](https://daily-dev-tips.com/posts/how-to-work-with-css-viewport-units/)) 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](https://codepen.io/rebelchris/pen/eYpJvxN) by Chris Bongers ([@rebelchris](https://codepen.io/rebelchris)) on [CodePen](https://codepen.io).

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

See the Pen [Challenge #3](https://codepen.io/rebelchris/pen/WNQQoMx) by Chris Bongers ([@rebelchris](https://codepen.io/rebelchris)) on [CodePen](https://codepen.io).

<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
### 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](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)