Last updated on

A while ago, I wrote about the CSS3 :target pseudo-class and how can that help you achieve some cool results when that matches an element that’s the target of a identifier in the document’s URI.

Today you’ll learn how to create a pretty simple animated CSS3 accordion with its help.

CSS3 simple accordion

What is an accordion

If you’re designing with usability in mind, then an accordion can be very useful when willing to organize content. The main advantage is packing a lot of content in a reduced space.

The HTML5 part

For this experiment I’ll use one of the new HTML5 elements, it’s about the section element. When using new HTML5 elements like this one, for older browsers, you need to use the following trick:

  <script>document.createElement('section');</script>

John Resig HTML5 Shiv

To simplify things here, I just used the de facto script for enabling HTML5 elements in Internet Explorer. It’s about Remy Sharp’s html5shiv:

  <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

Markup

Enough with theory, let’s see how this actually works:

<div class="accordion">
  <section id="one">
    <h2><a href="#one">Heading 1</a></h2>
    <div>
      <p>content</p>
    </div>
  </section>
</div>
  • The accordion div wraps the sections that compose the proper accordion.
  • Each section panel contains a title and of course its content.

CSS

  section {
    display: block;
  }

  .accordion {
    background-color: #eee;
    border: 1px solid #ccc;
    width: 600px;
    padding: 10px;
    margin: 50px auto;
    border-radius: 3px;
    box-shadow: 0 1px 0 #999;
  }

  .accordion section {
    border-bottom: 1px solid #ccc;
    margin: 5px;
    background-color: #fff;
    background-image: linear-gradient(top, #fff, #eee);
    border-radius: 5px;
  }

  .accordion h2,
  .accordion p {
    margin: 0;
  }

  .accordion p {
    padding: 10px;
  }

  .accordion h2 a {
    display: block;
    position: relative;
    font: 14px/1 'Trebuchet MS', 'Lucida Sans';
    padding: 10px;
    color: #333;
    text-decoration: none;
    border-radius: 5px;
  }

  .accordion h2 a:hover {
    background: #fff;
  }

  .accordion h2 + div {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
  }

  .accordion :target h2 a:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }

  .accordion :target h2 + div {
    height: 100px;
  }

Result

CSS3 accordion expanded section with :target pseudo-class

Browser support

The demo works in browsers that sup­port the :tar­get pseudo-class. Check out the compatibility table for more details.

CSS accordion with details and summary

A modern approach is to build an accordion using the HTML details and summary elements but apparently there’s some discussion on this lately: