Home / Articles / Programming languages / Markup languages / HTML & CSS / Simple content accordion using only CSS3

Simple content accordion using only CSS3

Simple content accordion using only CSS3
 
Simple content accordion 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.


The following article shows how to create a simple content accordion without JavaScript using only CSS3.

Let's begin with HTML structure. The current content accordion is div element with class "accordion" which contains elements. These elements are conventionally divided into so-called groups where each group is logically separated part of the content which has a header and content. Every such group contains three elements:

  • input element;
  • label element;
  • div element.

All the elements listed above work in the same way as corresponding elements in a toggle box. If you want to know more about them and how they work, just read the following article: Creating a toggle box to collapse or expand content using only CSS3.

The main difference between the toggle box and the content accordion are attributes type and name for input elements. For the content accordion the value of the attribute type must be set to radio and the value of the attribute name must be the same for all input elements of the current content accordion. Such approach makes it impossible to display contents of the several groups simultaneously, so only the content for one group can be displayed at the same time.

HTML code for a content accordion with three groups:

<div class="accordion">
  <input id="acrd1-item1" name="accordion1" type="radio" checked>
  <label for="acrd1-item1">Read more about HTML</label>
  <div><p>As you may know, HTML (HyperText Markup Language) - is a language for web page markup.</p></div>

  <input id="acrd1-item2" name="accordion1" type="radio">
  <label for="acrd1-item2">Read more about CSS</label>
  <div><p>Cascading Style Sheets allow you to keep the color, text size, and other parameters in styles.</p></div>

  <input id="acrd1-item3" name="accordion1" type="radio">
  <label for="acrd1-item3">Read more about PHP</label>
  <div><p>PHP is a programming language specifically designed to write web applications.</p></div>
</div>

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

.accordion {
  width: 400px;
}

.accordion > label {
  display: block;
}

.accordion > input {
  display: none;
}

.accordion > div {
  max-height: 0;
  overflow: hidden;
}

.accordion > input:checked + label + div {
  max-height: 1000px;
}

Live demo

The styles above work almost the same way as the styles for the toggle box that are described in the mentioned article above. One little difference is that the styles for hiding non-checked groups use max-height: 0; in combination with overflow: hidden; to hide their contents. And to show the content for the checked group max-height: 1000px; is used. Such approach has one disadvantage, if a content of any group expands the height of its container to more than 1000 pixels, the content will be cut off. In that case you should increase this value.

Here are CSS styles with a nice design and gradual animation (add them to the ones above):

.accordion > div > * {
  margin: 10px;
}

.accordion > input:checked + label {
  background-color: green;
}

.accordion > label {
  background-color: gray;
  border: 1px solid gray;
  color: white;
  cursor: pointer;
  font-weight: bold;
  padding: 4px 10px;
  text-transform: uppercase;
}

.accordion > div {
  margin-bottom: 1px;
  border-bottom: 1px solid gray;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  -webkit-transition: all linear 500ms;
  -moz-transition: all linear 500ms;
  -o-transition: all linear 500ms;
  transition: all linear 500ms;
}

Live demo

The styles above are intended for a content accordion which adjusts to any possible size of the content. Such an adjustment makes the content accordion very flexible, but animation suffers from it. If you want to have a nicer animation than it is now, you will need to sacrifice this adjustment. You need to set a fixed size of the height for div element in all groups and remove max-height CSS property from all styles.

Here are the changes which need to be performed with the styles above to achieve nicer animation:

  • max-height: 0; must be replaced with height: 0;
  • max-height: 1000px; must be replaced with height: 250px;

Live demo

As you can see now the animation looks much better than before, but the content of any group shouldn't expand the height of its div element greater than 250 pixels. In case you need to have more content you can increase the following value height: 250px; to greater one.

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

The following archive contains all the examples above:


 

Read also

Discussion (total 2 comments)

Beben Koben
March 17, 2014 at 12:31 pm
nice effect bro, ty for coding :D
etutionlk
June 29, 2015 at 11:36 pm
Nice Post
http://www.etutionlk.com/

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation