A pure CSS accordion widget using CSS3

A pure CSS accordion widget using CSS3, border-radius, ":target" pseudo-class and transition. This is just a proof of concept that still can be highly improved. Only works in recent Webkit-based browsers.

by bren

HTML

<div id="accordion">
    <h6><a href="#1">See paragraph 1</a></h2>
    <p id="1">
        Quisque et leo risus. Nullam in enim sed lorem dictum adipiscing. In odio tellus, eleifend quis bibendum nec, vestibulum vel mi. Aliquam erat volutpat. In consectetur dictum semper. Duis vitae risus sit amet dolor vestibulum dignissim quis ac mi. Donec quis elit vel felis facilisis porttitor. Sed eu velit nec felis adipiscing consectetur in vel libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam aliquet blandit risus, sit amet varius leo congue vel. Vivamus ut ornare leo. Quisque id mi ligula, sed suscipit justo. Maecenas eget odio eu risus lobortis aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc in eros neque, at suscipit odio. Nulla cursus nibh at ligula varius vitae aliquam velit ultricies. Mauris posuere mi sit amet nulla dictum non posuere quam sagittis. Sed enim magna, scelerisque in gravida lobortis, gravida in nibh. Donec nibh ipsum, semper eu tristique ac, molestie nec nunc. Nam volutpat congue sollicitudin.
    </p>
    <h6><a href="#2">See paragraph 2</a></h2>
    <p id="2">
        Nam posuere, urna eu euismod blandit, felis risus ornare odio, vel porttitor arcu tellus in nulla. Morbi fringilla gravida ante sed porttitor. In hac habitasse platea dictumst. In hac habitasse platea dictumst. In nisi est, iaculis quis ornare in, lacinia ut eros. Nunc diam mauris, rhoncus a porta et, consectetur ut lorem. Aenean placerat ligula lacinia diam molestie porta. Duis eu orci metus, sit amet consectetur velit. Praesent fringilla, dui a viverra vestibulum, urna purus tristique augue, in venenatis ipsum sapien at est. Donec vitae urna purus. Donec eu sagittis lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit
    </p>
    <h6><a href="#3">See paragraph 3</a></h2>
    <p id="3">
        Ut vitae dolor in nisl venenatis vehicula. Nullam vel metus mi. Nunc pulvinar nulla...

CSS

/*

   Copyright (c) 2010 Sebastien P.

   http://twitter.com/_sebastienp

   MIT licensed.

   ---

   A pure CSS accordion widget using CSS3,
   border-radius, ":target" pseudo-class
   and transition.

   This is just a proof of concept that
   still can be highly improved.

   Only works in recent Webkit-based browsers.

*/


/*
   A both axis repeated scaled-down
   left to right gradient is used here
   to create those background stripes.
*/

body {
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(70%, #eee),
        color-stop(70%, #fff)
    ) #eee;
    color: #333;
    font: 100% helvetica;
    line-height: 1;
    -webkit-background-size: 10px
}

#accordion {
    background: #fff;
    border: 0.1em solid #333;
    margin: 25px
}

/*
   Style those links inside h2 tags
   to act like a block-level button.
*/

#accordion > h6 > a {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fff),
        to(#ccc)
    ) #ccc;
    border: 0.1em solid #999;
    color: #333;
    display: block;
    font-size: 0.9em;
    text-decoration: none
}

#accordion > h6 > a:hover {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#fff),
        to(#cf0)
    ) #cf0
}

/*
   Set the background-clip rule to
   padding-box in order to prevent
   the gradient background bleeding
   caused by border-radius.
*/

#accordion,
#accordion > h6 > a {
    padding: 0.5em;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 0.5em
}

/*
   Setting the paragraphs' height to 0
   and their overflow to hidden in
   order to hide them and also be
   able to animate them later.
*/

#accordion > p {
    border-left: 0.1em solid #999;
   height: 0;
    margin: 0 0.5em;
    overflow: hidden;
    padding: 0 1em;
    text-align: justify;
    -webkit-transition: all 0.35s linear
}

/*
   The target pseudo-class is what does
   all...