Semantic Accordion Tabs

Simple near CSS-only Solution for an ineraction element that swaps between accordion and tab functionality.

by Simon Harte

HTML

<ul>
    <li><a href="#1">Tab 1</a></li>
    <li><a href="#2">Tab 2</a></li>
    <li><a href="#3">Tab 3</a></li>
</ul>

<section id="1" default>
    <h2><a href="#1">Accordion 1</a></h2>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore totam, accusantium autem ut animi nam quia ad doloremque fuga natus in eius excepturi, fugiat repellendus error quis incidunt minus molestias?</p>
    </div>
</section>

<section id="2">
    <h2><a href="#2">Accordion 2</a></h2>
    <div>
        <p>A id quod porro atque aut labore magni rerum perspiciatis sunt, corporis qui modi obcaecati nostrum, delectus, numquam iure molestiae laudantium perferendis eius ab, ipsa pariatur maxime nemo odio! Numquam.</p>
    </div>
</section>

<section id="3">
    <h2><a href="#3">Accordion 3</a></h2>
    <div>
        <p>Error quia facilis optio eligendi obcaecati eos asperiores! Tempore perferendis odit ducimus tenetur dignissimos repellat sapiente culpa, libero, minima iste laboriosam, eum non. Natus animi totam molestiae sequi voluptate excepturi!</p>
    </div>
</section>

SCSS

ul {
    display: none;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: stretch;
    margin: 0;
    padding: 0;
    list-style: none;

    a {
        display: block;
        padding: 10px;
    }

    @media (min-width: 50em) {
        display: flex;
    }
}

section {
    div {
        display: none;
    }

    &:target {
        div {
            display: block;
        }
    }

    @media (min-width: 50em) {
        h2 {
            display: none;
        }
    }
}

JavaScript

// optional script to initially show a content
location.hash = location.hash || '#1';