Home / Articles / Programming languages / Markup languages / HTML & CSS / Creating a toggle box to collapse or expand content using only CSS3

Creating a toggle box to collapse or expand content using only CSS3

Creating a toggle box to collapse or expand content using only CSS3
 
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


This article describes how to create a toggle box which shows or hides content using only CSS3.

Such toggle boxes are often used on pages with a lot of content. To make it more structured, all content is divided into so-called groups (toggle boxes) where each toggle box only shows its title, the content is hidden by default and can be seen if you click on the title.

Example

The toggle box which is described in this article uses only CSS3 without JavaScript. This became possible because CSS3 has pseudo-class checked which applies styles when the user checks a checkbox.

Each toggle box consists of three elements:

  1. Checkbox - input tag which has: type attribute with the value checkbox and id attribute with value of a unique identifier of the current toggle box.
  2. Title - label tag which has: for attribute with the value of a unique identifier of the current toggle box (the identifier must be the same as the value of id attribute in the checkbox of the current toggle box).
  3. Content block - div tag which contains the content (text, pictures etc.) of the current toggle box.

The whole trick is that the content block and the checkbox are hidden by styles and the checkbox changes its state (checked or unchecked) only when the user clicks on the title which is related with the checkbox by a unique identifier (id attribute for input tag and for attribute for label tag); when this happens, CSS applies new styles (with the help of the pseudo-class checked) to show the content block which prior to this was hidden.

Important notice: when you use several toggle boxes on one page, each toggle box must have a unique identifier which should differ from the identifiers in other toggle boxes.

A toggle box in this article has one problem: pseudo-class checked is only supported by IE version 9 and higher. For older IE versions you will need to use JavaScript.

Here is a complete HTML code for one toggle box:

<input class="toggle-box" id="identifier-1" type="checkbox" >
<label for="identifier-1">Click here to read more about HTML!</label>
<div>HTML - is a language for web page markup.</div>

Here are CSS styles which are necessary to make it work:

.toggle-box {
  display: none;
}

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

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

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

Live demo

Here are complete CSS styles with a nice design:

.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";
}

Live demo

The examples above won't work in Safari unless a hack is applied, but it can cause some additional CPU overhead, use it only when Safari support is required. The following CSS styles should be added to ones above:

body { -webkit-animation: bugfix infinite 2s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Live demo


 

Read also

Discussion (total 4 comments)

Beben Koben
January 21, 2014 at 02:32 am
nice General navigation and gret content ;)
Bruno Bezerra
June 25, 2014 at 01:52 pm
There were times that I was looking for an article similar to this, solved my problem completely! I have a blog that has in one of its pages a FAQ, but made ​​with HTML and JQuery. This field allows us to insert this code no problem, very easy and useful.
T Hedrick
August 15, 2014 at 11:11 am
Doesn't work with Safari (but does for other webkit browsers), for those poor folks you need to force reflows with something like:
body { -webkit-animation: bugfix infinite 2s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
This will add some cpu overhead...
Administrator User
Administrator User
August 17, 2014 at 05:32 am
Hi T Hedrick!
You are right! It doesn't work in Safari! But, your fix solves the problem! Thank you for sharing this!

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation