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.

To create an accordion using HTML and CSS only:

  • Create a “stack” of checkbox, label, and container.
    • <input id="a" type="checkbox">
    • <label id="b" for="a">Tab</label>
    • <div id="c">Content</div>
  • Hide the checkbox and content by default. Only show the content when the checkbox is checked.
    • #a, #c { display: none; }
    • #a:checked ~ #c { display : block; }

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

 

 

HTML CSS ACCORDION

All right, let us now get into a slightly more detailed example of the HTML CSS accordion.

 

ACCORDION DEMO

 

PART 1) THE HTML

1-accordion.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

1-accordion.css
/* (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

1-accordion.css
/* (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

2-radio.html
<!-- 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.

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

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.

 

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras that may be useful to you.

 

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

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

Pure HTML CSS Accordion (click to enlarge)

 

THE END

Thank you for reading, and We have come to the end of this guide. I hope that it has helped you to create a better website, and if you have anything to share with this guide, please feel free to comment below. Good luck and happy coding!

15 thoughts on “Simple Responsive Accordion In Pure HTML CSS (Free Download)”

  1. It might be a very stupid question but since i can´t code at all i´ll go ahead and ask.
    How can I use this on wordpress? I thought about adding the CSS in additional css in the customizer and add the tab class to a paragraph in gutenberg, but I´m pretty sure that´s not going to work because there would be no connection between the title and the content and between the titles and content and the other titles and content… In other words I don´t know where to put the html on wordpress

  2. Hi W.S.,

    Thank you for the code/tutorial! If I wanted to move the arrow pointer to the left, how do I account for the heading text?

    I changed the (F) section “right: 10px” to “left:10px”, which got the arrow on the correct side I want it to show on, but I don’t know how to fix the overlap it has with my tab title text.

    Thank you!
    Sylvia

  3. Thanks again for this. It is great. I have noticed an odd quirk perhaps. For the radio – one at a time drop-downs there seems to be an issue with scrolling when viewing on small screens so that sometimes when you click on a tab, the browser scrolls too far and you have to manually scroll back up to read the contents of the tab. Here is what I did to replicate which might explain better:
    1) Include lots of paragraphs of text in each drop-down.
    2) Include a few paragraphs of text after the drop-down (that is, paragraphs under the drop-down)
    3) Click Tab 1. It displays fine.
    4) Scroll down to Tab 2 and click Tab 2. It displays fine.
    5) Scroll down to Tab 3 and click Tab 3. The browser scrolls down too far and you have to scroll back up to view the start of the text in Tab 3.

    This only occurs on small sized screens. This behaviour does not occur on larger screens. I am not sure what causes it. Maybe there is a limitation on the amount of content you can include in a tab maybe?

    1. Well, you kind of already answered your own question. That is a browser behavior and that is just the way how it renders the HTML/CSS… More CSS probably won’t fix anything. I will limit the content, or use Javascript to listen to the animationend event, then scroll back up automatically.

Leave a Comment

Your email address will not be published. Required fields are marked *