Simple Responsive Accordion With Pure CSS (Free Download)

Welcome to a tutorial on how to create a simple responsive accordion. Yes, there are a lot of “accordion plugins” in the world, but some of them require a third-party framework. It simply does not make sense to load an entire library for a single accordion – So here it is, a super lightweight accordion using only pure CSS. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes	CSS Accordion	Useful Bits
The End

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the source code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to.

 

 

 

1) CHECKBOX ACCORDION

1A) THE DEMO

 

1B) THE HTML

<!-- FIRST TAB -->
<div class="tab">
  <input id="tab-1" type="checkbox">
  <label for="tab-1">Tab 1</label>
  <div class="content"><p>Next to the risk dictates a nurse.</p></div>
</div>

<!-- SECOND TAB -->
<div class="tab">
  <input id="tab-2" type="checkbox">
  <label for="tab-2">Tab 2</label>
  <div class="content"><p>Should the pace attack?</p></div>
</div>

<!-- THIRD TAB -->
<div class="tab">
  <input id="tab-3" type="checkbox">
  <label for="tab-3">Tab 3</label>
  <div class="content"><p>A circumstance strikes a deserved trap.</p></div>
</div>

The HTML should be straightforward enough.

• Create a <div class="tab"> container.
• Sandwich 3 things inside the container.
  • <input id="tab-N" type="checkbox"> Required to toggle show/hide the tab contents.
  • <label for="tab-N"> The tab label itself.
  • <div class="content"> The tab contents.
• That’s all. Create as many <div class="tab"> sections as required.

 

 

1C) THE CSS

/* (A) TABS CONTAINER */
.tab, .tab * {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
.tab { max-width: 600px; }

/* (B) HIDE CHECKBOX */
.tab input { display: none; }

/* (C) TAB LABEL */
.tab label {
  /* (C1) DIMENSIONS */
  position: relative; /* required for (f2) position:absolute */
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px;
 
  /* (C2) COSMETICS */
  font-weight: 700;
  color: #fff;
  background: #2d5faf;
  cursor: pointer;
}

/* (D) TAB CONTENT - HIDDEN BY DEFAULT */
/* css animation will not work with auto height */
/* this is why we use max-height instead */
.tab .content {
  background: #ccdef9;
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}
.tab .content p { padding: 10px; }

/* (E) OPEN TAB ON CHECKED */
.tab input:checked ~ .content { max-height: 100vh; }

/* (F) EXTRA - ADD ARROW INDICATOR */
.tab label::after {
  /* (F1) RIGHT ARROW */
  display: block;  
  content: "\25b6";
 
  /* (F2) PLACE AT RIGHT SIDE */
  position: absolute;
  right: 10px; top: 10px;
 
  /* (F3) ANIMATED ARROW */
  transition: all 0.4s;
}
 
/* (F4) ROTATE ARROW ON CHECKED */
.tab input:checked ~ label::after { transform: rotate(90deg); }

This may look complicated, but the essential mechanics are:

• (B) First, hide the ugly checkbox with .tab input { display: none; }. The checkbox will still function when we click on the label.
• (D) Hide the tab contents by default – .tab .content { max-height: 0 }
• (E) Show the tab contents when the checkbox is checked (when we click on the label) – .tab input:checked ~ .content { max-height: 100vh; }.

Yep, that’s all. The rest is pretty much just cosmetics.

 

 

2) RADIO BUTTON ACCORDION

2A) THE DEMO

 

2B) THE HTML

<!-- FIRST TAB -->
<div class="tab">
  <input id="tab-1r" type="radio" name="tabr">
  <label for="tab-1r">Tab 1</label>
  <div class="content"><p>Next to the risk dictates a nurse.</p></div>
</div>

<!-- SECOND TAB -->
<div class="tab">
  <input id="tab-2r" type="radio" name="tabr">
  <label for="tab-2r">Tab 2</label>
  <div class="content"><p>Should the pace attack? </p></div>
</div>

<!-- THIRD TAB -->
<div class="tab">
  <input id="tab-3r" type="radio" name="tabr">
  <label for="tab-3r">Tab 3</label>
  <div class="content"><p>A circumstance strikes a deserved trap.</p></div>
</div>

Look no further, the only difference here is that we are using radio buttons and not checkboxes – This will enforce “only one tab can be opened at a time” for those who need it.

 

 

 

OPENING TABS “BY DEFAULT”

How do we set a tab to be opened on page load? Very simply set the checked attribute – <input type="checkbox" checked>.

 

RADIO ACCORDION RESTRICTION

Well, as some may have already noticed. The default behavior in HTML is that one radio button will be selected at all times, and there is no way we can unselect without using Javascript. So yes, the “restriction” in the radio button accordion is that one tab will be opened at all times.

 

LINKS & REFERENCES

• Javascript Accordion – Code Boxx
• Example on CodePen – Pure CSS Accordion

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEAT SHEET