CSS Only Accordion

Accordions are pretty common today in websites. They are a cool design tool that allows developers to get more content into a small area. They are also great for mobile devices.

The animations and logic required to create an accordion used to require Javascript or jQuery, but with the rise of CSS3, you can accomplish the same effect without any client-side code.

CSS Only Accordion Example

View Demo
Download Source

HTML

First, here is the HTML structure of the accordion. You may be a bit confused at first, but bare with me.


<div class="container">
<div class="accordion">
<div>
            <input id="ac-1" name="accordion-1" type="checkbox" />
            <label for="ac-1">About</label>
<div class="article ac-small">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
</div>
</div>
<div>
            <input id="ac-2" name="accordion-1" type="checkbox" />
            <label for="ac-2">Resume</label>
<div class="article ac-medium">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi...
</div>
</div>
<div>
            <input id="ac-3" name="accordion-1" type="checkbox" />
            <label for="ac-3">Portfolio</label>
<div class="article ac-large">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis...
</div>
</div>
<div>
            <input id="ac-4" name="accordion-1" type="checkbox" />
            <label for="ac-4">Contact</label>
<div class="article ac-large">
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci...
</div>
</div>
</div>
</div>

CSS

The CSS is where we’ll make the magic happen. See if you can figure out what is causing the same effect that we would use the Javascript “onclick” event trigger to generate the animation.

.accordion {
    width: 400px;
    margin: 10px auto;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.accordion label {
    font-family: Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    line-height: 33px;
    font-size: 19px;
    background: #EFEFEF;
    border: 1px solid #CCC;
}
.accordion label:hover {
    background: #F3F3F3;
}
.accordion input + label {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
    background: #CDECC5;
    color: #3d7489;
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
    display: none;
}
.accordion .article {
    background: rgb(255, 255, 255);
    overflow: hidden;
    height: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.accordion .article p {
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
}
.accordion input:checked ~ .article {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .article.ac-small {
    height: 155px;
}
.accordion input:checked ~ .article.ac-medium {
    height: 195px;
}
.accordion input:checked ~ .article.ac-large {
    height: 245px;
}

That’s right, the accordion is essentially a group of check boxes. We’re hiding the actual checkbox from displaying with this line of CSS:

.accordion input {
    display: none;
}

Then, we’re using the “checked” state to add new style to the elements in the accordion. Add a little CSS transitioning, and you have yourself a fully functioning accordion!

Browser Support

  • Internet Explorer 9+
  • Firefox
  • Chrome
  • Safari
  • Opera

That’s really all there is too it. Not too bad, eh?

Reference URL: http://tympanus.net/codrops/2012/02/21/accordion-with-css3/

Categories Blog