Pure CSS toggle accordion

A pure CSS accordion

HTML

<link rel="stylesheet" href="http://oli.me.uk/assets/css/normalize.css/normalize.css">
<script src="http://oli.me.uk/assets/javascript/prefixfree/prefixfree.js"></script>
<div class="center">
                <input type='checkbox' name="a" id="cp-1" checked="checked">
                <label for="cp-1">test</label>
                <div class="sub"><a href="#">Impressum</a>
                    <ul>
                        <li>CSS - Syles
                        <li><a href="#" onclick="changeStyle('tom')">Tom</a>
                        <li><a href="#" onclick="changeStyle('adrian')">Adrian</a>
                        <li><a href="#" onclick="changeStyle('janneck')">Janneck</a>
                        <li><a href="#" onclick="changeStyle('david')">David</a>
                        <li><a href="#" onclick="changeStyle('fabian')">Fabian</a>
                    </ul>
                    <p>&copy; 2012 - trinkX GmbH</p>
                 </div>
            </div>

CSS

/* Set up the div that will show and hide */
input[type='checkbox']{
    overflow: hidden;
    padding: 0 10px;
    display: none;
}
input[type='checkbox'] {
    display: none; 
}
/* Show the content boxes when the radio buttons are checked */
input[type='checkbox'] + label + div.sub {
    opacity: 0;
    -webkit-transition: opacity 600ms linear;
    -moz-transition: opacity 600ms linear;
    -o-transition: opacity 600ms linear;
    transition: opacity 600ms linear;
}
input[type='checkbox']:checked + label + div.sub{
    opacity: 1.0;
}
input[type='checkbox']:checked + label {
background: #a0a0a0;
}