Pure CSS Accordian

by BinaryAcid

HTML

<div class="accordion">
        <h2>Accordion Demo</h2>
        <div id="one" class="section">
                <h3>
                        <a href="#one">Heading 1</a>
                </h3>
                <div>
                        <p>Content</p>
                </div>
        </div>
        <div id="two" class="section">
                <h3>
                        <a href="#two">Heading 2</a>
                </h3>
                <div>
                        <p>Content</p>
                </div>
        </div>
</div>

CSS

.accordion h3 + div {
        height: 0;
        overflow: hidden;
        -webkit-transition: height 0.3s ease-in;
        -moz-transition: height 0.3s ease-in;
        -o-transition: height 0.3s ease-in;
        -ms-transition: height 0.3s ease-in;
        transition: height 0.3s ease-in;
}

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

.accordion .section.large:target h3 + div {
        overflow: auto;
}