Expand Collapse HTML DIV Using Pure CSS Only

Last Updated: March 27, 2023

Welcome to a quick tutorial and example on how to expand and collapse an HTML DIV using pure CSS only. So you want to hide a section of the page, a form, or maybe even create a hidden menu?

A simple way to create a collapsible DIV is to use a checkbox and CSS sibling selector to toggle the visibility.

  • Create a label, checkbox, and the DIV container itself.
    • <label for="tog">Toggle</label>
    • <input type="checkbox" id="tog">
    • <div id="content">TEXT</div>
  • Hide the checkbox and content by default, show the contents only when the checkbox is checked.
    • #tog, #content { display: none }
    • #tog:checked + #content { display: block }

That covers the basic idea, but read on for the full example!

ⓘ 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.

 

 

TABLE OF CONTENTS

 

DOWNLOAD & DEMO

Firstly, here is the download link to the example code as promised.

 

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 example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

COLLAPSIBLE DIV DEMO

 

 

COLLAPSIBLE DIV WITH PURE CSS

All right, let us now get into the details of the pure CSS collapsible DIV.

 

PART 1) THE HTML

collapsible.html
<!-- (A) TOGGLE BUTTON -->
<label for="check" class="togButton">Toggle</label>
 
<!-- (B) CONTENT -->
<input type="checkbox" class="togCheck" id="check">
<div class="togContent">
  <p>Just some random content here.</p>
</div>
 
<!-- (C) REST OF PAGE -->
<p>Hello World!</p>

This is the same as the introduction snippet, it just has a little more content.

  • Place a <input type="checkbox" class="togCheck" id="check"> before  <div class="togContent">.
  • Use <label for="check"> to toggle the checkbox.

 

PART 2) HIDE CHECKBOX & CONTENT

collapsible.css
/* (A) HIDE CHECKBOX */
.togCheck { display: none; }
 
/* (B) HIDE CONTENT BY DEFAULT */
.togContent {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: max-height 1s;
}
  • (A) By default, we will hide the checkbox using display: none. Yes, the checkbox will still work when we click on the label.
  • (B) Instead of using display: none to hide the content, we are using max-height: 0; opacity: 0; visibility: hidden; now. The reason is very simple – CSS transition cannot animate display: none.

 

 

PART 3) SHOW CONTENT

collapsible.css
/* (C) SHOW CONTENT WHEN CHECKED */
.togCheck:checked + .togContent {
  max-height: 100vh; /* any insanely large number if a lot of contents */
  opacity: 1;
  visibility: visible;
}

To show the DIV, we set max-height: ANY LARGE DIMENSION; opacity: 1; visibility: visible.

 

PART 4) COSMETICS

collapsible.css
/* (X) COSMETICS - DOES NOT MATTER */
/* (X1) ENTIRE DEMO */
* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}
 
/* (X2) TOGGLE BUTTON */
.togButton {
  display: block;
  width: 100%;
  padding: 10px;
  color: #fff;
  background: #00409f;
  cursor: pointer;
}
 
/* (X3) CONTENT */
.togContent { background: #f4f6ff; }
.togContent p {
  padding: 50px 10px;
  margin: 0;
}

Lastly, nothing much to see here – Just some cosmetics to make things look better.

 

 

EXTRA BITS & LINKS

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

 

THE EASY WAY – SUMMARY TAG

<details>
  <summary>HEAD</summary>
  <p>Some random content here.</p>
</details>
HEAD

Some random content here.

Yes, there is an easier way to create a collapsible/expandable container with HTML <details><summary>. But here’s the thing:

  • <details><summary> Carries semantic weight. That is, they tell search engines “this is a summary, and here are the details”.
  • If your purpose is “cosmetics”, <details><summary> may work against you in terms of SEO.
  • CSS is still required if you want “nice animations and customizations”.

I leave it up to you to decide.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEATSHEET

Collapsible DIV With Pure CSS (Click To Enlarge)

 

THE END

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