Legacy Tabs CSS Only

by meo

HTML

<nav>
    <h1>Tab Navigation</h1>
    <a href="#tab1">Go to Tab1</a>
    <a href="#tab2">Go to Tab2</a>
    <a href="#tab3">Go to Tab3</a>
    <a href="#tab4">Go to Tab4</a>
</nav>


<section class="tabs">
    <h1>Some Tabs</h1>
    <article id="tab1">
        <h1>Content of the first tab</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis laoreet nulla, at sodales ipsum ultricies sit amet. Etiam ullamcorper leo eu magna interdum ac blandit lectus lobortis. Donec molestie, augue non hendrerit ultrices, nulla tortor adipiscing orci, ut rutrum nisi ipsum eu nulla. Pellentesque in ante diam, sit amet laoreet purus.</p>
    </article>
    <article id="tab2">
        <h1>Content of tab 2</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis laoreet nulla, at sodales ipsum ultricies sit amet. Etiam ullamcorper leo eu magna interdum ac blandit lectus lobortis. Donec molestie, augue non hendrerit ultrices, nulla tortor adipiscing orci, ut rutrum nisi ipsum eu nulla. Pellentesque in ante diam, sit amet laoreet purus. Curabitur cursus, urna non accumsan hendrerit, ante metus sodales justo, fringilla mollis odio est vel nulla. Vestibulum volutpat lacus ac mauris pulvinar scelerisque. Nam tempor sagittis orci, sed tristique eros sollicitudin quis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis laoreet nulla, at sodales ipsum ultricies sit amet. Etiam ullamcorper leo eu magna interdum ac blandit lectus lobortis. Donec molestie, augue non hendrerit ultrices, nulla tortor adipiscing orci, ut rutrum nisi ipsum eu nulla. Pellentesque in ante diam, sit amet laoreet purus. Curabitur cursus, urna non accumsan hendrerit, ante metus sodales justo, fringilla mollis odio est vel nulla. Vestibulum volutpat lacus ac mauris pulvinar scelerisque. Nam tempor sagittis orci, sed tristique eros sollicitudin quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lobortis laoreet nulla, at...

SCSS

nav {
    h1 {
        display: none;        
    }
}
section {
    position: relative;
    height: 200px;
    overflow: hidden;
    
    > h1 {
        display: none;        
    }
    article {
        overflow: scroll;
        height: 100%;  
        padding: 20px 20px 25px;
        margin-bottom: 100px;
        background: rgba(0,0,0,.1);
        h1 {
            font-size: 20px;
            margin-bottom: 10px;        
        }
    }
}