CSS only tabs

This has pretty much been done to death, but here's my hat in the ring. The Javascript is only included to provide IE8 support. However, I didn't actually test IE8 support, so if someone would be so kind… Oh yeah, and opacity needs the -ms-filter bit. Boy I'm lazy when it comes to IE8. You really have two options for the height of the tabs. If you set the initial display state (`.tabs section .content`) to `display: none;`, the tab container will grow and shrink to fit the open tab. If you go with opacity (as I have done here), the tab container will keep the height of the tallest tab. Oh yeah, and it only really works with one row of tabs because there's a margin-top set on each of the tab contents. If you think the number of tabs will wrap to another row, first thought is to use @media queries to compensate. Otherwise, better solutions are welcome.

by thirdender

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,600"></script>
<p>Content before</p>
<div class='tabs'>
    <input type='radio' id='tab-0' name='tabs' checked />
    <section>
        <label onclick='' for='tab-0'>
            <h1>Tab #0</h1>
        </label>
        <div class='clear'></div>
        <div class='border'>
            <div class='content'>
                <p>Maecenas malesuada. Quisque malesuada placerat nisl. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Mauris sollicitudin fermentum libero.</p>
            </div>
        </div>
    </section>
    <input type='radio' id='tab-1' name='tabs' />
    <section>
        <label onclick='' for='tab-1'>
            <h1>Tab #1</h1>
        </label>
        <div class='clear'></div>
        <div class='border'>
            <div class='content'>
                <p> Nulla consequat massa quis enim.Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Curabitur suscipit suscipit tellus. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Curabitur at lacus ac velit ornare lobortis. Nulla facilisi.Cras non dolor. Nunc interdum lacus sit amet orci. Vivamus consectetuer hendrerit lacus. Quisque id odio. Nunc sed turpis.Praesent venenatis metus at tortor pulvinar varius. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Cras id dui.</p>
            </div>
        </div>
    </section>
    <input type='radio' id='tab-2' name='tabs' />
    <section>
        <label onclick='' for='tab-2'>
            <h1>Tab #2</h1>
        </label>
        <div class='clear'></div>
        <div class='border'>
            <div class='content'>
                <p> Etiam rhoncus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros.Nam eget dui. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Praesent...

SCSS

body {
    background: whitesmoke;
    font-family: 'Open Sans', sans-serif;
    font-size: .84em;
}
.tabs {
    // Clearfix
    &:after {
        content: '';
        display: table;
        clear: both;
    }
    // Hide radios (should this use another hiding method for accessibilty?)
    [type='radio'] {
        display: none;
    }
    section {
        display: inline;
        label {
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
            h1 {
                box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, .1) inset;
                font-size: 1em;
                background: #eee;
                border: 1px solid #ccc;
                border-radius: .2em .2em 0 0;
                padding: .4em .8em;
                line-height: 1.2em;
                margin: 0 2px 0 0;
                position: relative;
                z-index: 3;
            }
        }
        .clear {
            float: right;
            width: 100%;
        }
        .border {
            background: white;
            box-sizing: border-box;
            opacity: 0;
            transition: opacity .4s ease;
            float: left;
            width: 100%;
            margin-right: -100%;
            position: relative;
            border: 1px solid #ccc;
            border-radius: 0 0 .2em .2em;
            padding: .4em 1.4em;
        }
        .content {
            opacity: 0;
            transition: all .4s ease;
            -webkit-transform: translateY(-10px) perspective(600px) scale(0.9) rotateX(20deg);
            position: relative;
            z-index: 2;
        }
    }
    section.checked, [type='radio']:checked + section {
        h1 {
            box-shadow: none;
            background: white;
            border-bottom-color: white;
            z-index: 3;
            float: left;
        }
        .border {
            opacity: 1;
        }
        .content {
            opacity: 1;
            z-index: 1;
           ...

JavaScript

jQuery(function($) {
    // IE8 support
    $('.tabs').each(function() {
        var container = $(this),
            radios = container.children('[type="radio"]'),
            sections = container.children('section');
        container.on('change', '> [type="radio"]', function() {
            sections.removeClass('checked');
            sections.eq(radios.index(this)).addClass('checked');
        });
        sections.first().addClass('checked');
    });
});