CSS Only Accordion

  • follow us in feedly
Published June 12, 2013 by Brad Knutson
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/

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

12 thoughts on “CSS Only Accordion

    1. Brad Knutson Post author

      Hello Chandra,

      Which version of IE are you using? Depending on the version, it will perform differently.

      IE10 – Full functionality
      IE9 – Accordion works properly, but smooth CSS transitions do not.
      IE8 and IE7 – Unfortunately, this method does not work.

      If you are using IE7 or IE8 I strongly suggest you update! A very small percentage of individuals on the internet have browsers that old, so I’m not too worried about it working in older browsers.

    1. Brad Knutson Post author

      Hey Timur,

      It looks like Safari 3.2.2 for Windows is from 2009, which is before CSS3 really came into it’s own and started getting regular use. It works great in Safari 5.1.7 that I just tested on Windows!

      Thanks,
      Brad

    2. Bob

      OMG, who is using Safari 3 in Windows? Do you care that there is no cell reception in the middle of the Pacific Ocean?

  1. Tim

    Hi Brad, great solution here! I just tried to implement it however, and the problem I have is that all the sections can be opened at once. I.e Clicking “About”, having it open, and then clicking “Contact”, will have both of their “article ac-large” to be open, instead of closing the previously opened one. Any way around this?
    Cheers

    Tim

    Reply
    1. Brad Knutson Post author

      You could accomplish this by using radio buttons instead of check boxes for your HTML, and modifying the CSS slightly.

    2. malick

      Hi, I did this successfully, but now I want to be able to “uncheck” a radio button so all of them are hidden at once. Do you have a way to do this? I tried to put a js script to be able to make the radio buttons “uncheckable”, and it did, but when I put back the css it does’nt hide the corresponding block.
      Thank You!

    3. Brad Knutson Post author

      Javascript is definitely they way to go. Toggling a check box or radio button and using JS to expand and contract each accordion slice. I’m not sure what you mean about an “uncheckable” radio button, could you give me more info?

    4. malick

      When I used the “radio button method”, after oppening a section, I couldn’t close it. That’s normal, because you are not supposed to be able to “uncheck” a radio button after you checked it. That’s why I had to use javascript to make my radio buttons “uncheckable”. here is the code that I found online to be able to do this:

      var radios = $("input[name='accordion-1']");
      radios.click(function(){
      var isChecked = $(this).attr('is_che');
      if (isChecked) {
      $(this).removeAttr('checked');
      $(this).removeAttr('is_che');
      }
      else {
      $(this).attr('checked', 'checked');
      $(this).attr('is_che', 'true');
      }
      });

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">