Creating a toggle box to collapse or expand 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:



HTML - is a language for web page markup.

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

Continue reading here: How to display inline elements as block elements and visa-versa

Was this article helpful?

0 -3