How to Expand & Collapse (toggle) div Layer Using Only CSS3

Lists are one of the best ways to present information in a structured way, we can create different level of depth according to categories or level of details. But sometimes when the information is too much, showing all the full data at a click can overload the design, especially if we want to keep it simple and clean.

One way to having a list that shows an important amount of data and at the same time not hinder the rest of design is making the list expandable and collapsible in a dynamic way.

More and more lately I’ve seen developers creating toggle states most especially with jQuery. But this guide is going to show you how to create expand and collapse toggle effect with pure CSS3. I have tried to keep it as simple as possible with a few lines of code.

Demo:

Click here to read more!

Lorem ipsum dolor sit amet, consectetuer adipiscing.
Lorem ipsum dolor sit amet, consectetuer adipiscing.

HTML

<input class="toggle-box" id="header1" type="checkbox" >
<label for="header1">Click here to read more!</label>
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing.</div>

In the HTML code above, i have use header1 as the header class, duplicating the layer means you will to give it another unique ID like header2.


CSS

.toggle-box {
  display: none;
}

.toggle-box + label {
  cursor: pointer;
  display: block;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}

.toggle-box + label + div {
  display: none;
  margin-bottom: 10px;
}

.toggle-box:checked + label + div {
  display: block;
}

.toggle-box + label:before {
  background-color: #4F5150;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  color: #FFFFFF;
  content: "+";
  display: block;
  float: left;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}

.toggle-box:checked + label:before {
  content: "\2212";
}

I have set the toogle-box to display: none; so as to to prevent div element from appearing, and with pseudo class i have add set a positive sign (content: "+") to indicate inactive and a negative sign to indicate active (content: "\2212").
That's it! Expandible-Collapsible panel is ready.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz