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>
    <label for='cp-1'>Content pane 1</label>
    <input type='radio' name='a' id='cp-1' checked='checked'>
    <div class='content'>
        <p>part1</p>
    </div>
    <label for='cp-2'>Content pane 2</label>
    <input type='radio' name='a' id='cp-2'>
    <div class='content'>
        <p>part 2</p>
    </div>

CSS

/* Set up the div that will show and hide */
div.content {
    overflow: hidden;
    padding: 0 10px;
    display: none;
}
input[type='radio'] {
    display: none; 
}
/* Show the content boxes when the radio buttons are checked */
label + input[type='radio']:checked + div.content {
    display: block;
}

JavaScript

// The checked pseudo selector (input:checked) does not work in older browsers
// You can use selectivizr to correct this if required
// http://selectivizr.com/