Simple Responsive Accordion In Pure HTML CSS (Free Download)

Welcome to a tutorial on how to create a very simple responsive accordion with pure HTML and CSS. Yes, you read that right, no Javascript is required.

Yep, that’s all for the basic mechanics. If you need detailed examples – Read on!

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

 

ACCORDION DEMO

 

PART 1) THE HTML

<!-- FIRST TAB -->
<div class="tab">
  <input id="tab-1" type="checkbox">
  <label for="tab-1">Tab 1</label>
  <div class="content">
    <img src="HTML-accordion-a.png"> PASTA
  </div>
</div>

<!-- SECOND TAB -->
<div class="tab">
  <input id="tab-2" type="checkbox">
  <label for="tab-2">Tab 2</label>
  <div class="content">
    <img src="HTML-accordion-b.png"> PIZZA
  </div>
</div>

This is the same “stack” of checkbox, label, and container. Except that we wrap all of them in a <div class="tab"> to “better manage” the tabs.

 

PART 2) BASIC MECHANICS

/* (A) HIDE CHECKBOX & CONTENT, SHOW ON CHECKED */
.tab input, .tab .content { display: none; }
.tab input:checked ~ .content { display: block; }

This is the same “basic mechanics” in the introduction above. For those who are lost:

• The checkbox will still work even when we hide it; Clicking on the label will toggle the checkbox.
• So very simply, the display area is display: none by default. When the checkbox is checked, we apply display: block to show the content.

 

 

PART 3) RESPONSIVE & COSMETICS

/* (B) COSMETICS */
/* (B1) WARPPER */
.tab {
  max-width: 600px; /* optional */
  margin-bottom: 10px;
}
 
/* (B2) LABEL */
.tab label {
  display: block; padding: 10px;
  font-weight: 700;
  color: #fff; background: #2d5faf;
  cursor: pointer;
}
 
/* (B3) CONTENT */
.tab .content {
  padding: 10px;
  background: #ccdef9;
}
 
/* (B4) DIRECTION ARROW */
.tab label { position: relative; }
.tab label::after {
  display: block; content: "\25b6";
  position: absolute; right: 10px; top: 10px;
  transition: all 0.4s;
}
.tab input:checked ~ label::after { transform: rotate(90deg); }

Before the angry trolls start to bang on the keyboard on “where is the responsive part”, I will say “don’t need to think too much”:

• Simply set the label and content area to width: 100%.
• You can also restrict the width of the accordion with .tab { max-width: N } if you want.
• The rest are all cosmetics – Font color, size, padding, margin, background color.

Yep, responsive. Just set a percentage width and the container will scale itself to fit.

 

 

EXTRA) ONLY ONE TAB CAN OPEN AT A TIME

<!-- FIRST TAB -->
<div class="tab">
  <input id="tab-1" name="tab" type="radio">
  <label for="tab-1">Tab A</label>
  <div class="content">
    <img src="HTML-accordion-a.png"> PASTA
  </div>
</div>

<!-- SECOND TAB -->
<div class="tab">
  <input id="tab-2" name="tab" type="radio">
  <label for="tab-2">Tab B</label>
  <div class="content">
    <img src="HTML-accordion-b.png"> PIZZA
  </div>
</div>

Use radio buttons instead of checkboxes. Also, set them to the same name.

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET