Pure CSS Expanders

by path411

HTML

<ul>
    <li>
        <a href="#section1">Show Section 1</a>
        <section id="section1">
            Section 1
        </section>
    </li>
    
    <li>
        <a href="#section2">Show Section 2</a>
        <section id="section2">
            Section 2
        </section>
    </li>
    
    <li>
        <a href="#section3">Show Section 3</a>
        <section id="section3">
            Section 3
        </section>
    </li>
    
    <li>
        <a href="#section4">Show Section 4</a>
        <section id="section4">
            Section 4
        </section>
    </li>
</ul>

CSS

a + section {
    display:none;
}
section:target {
    display:block;
}