Simple jQuery Tabs

Very lightweight tabs for use with an un-/ordered list using existing markup. Not really for use 'as-is' but a sensible base from which to work from. https://github.com/i-like-robots

by tiagocarvalho

HTML

<ul class="tabs">
    <li>
        <a class="tab-heading" href="#first-tab">First tab</a>

        <div id="first-tab" class="tab-content">

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra felis in tellus ullamcorper vehicula. Fusce
            at neque vel turpis interdum mattis et at tellus. Fusce nunc urna, tempor et blandit accumsan, scelerisque at lorem.
            Quisque nec erat ante, lobortis laoreet augue. Phasellus porttitor velit nec nisi auctor eu feugiat est congue. Duis
            imperdiet gravida malesuada. In hac habitasse platea dictumst. Nunc erat tortor, vehicula ac laoreet eget, blandit et
            velit. Praesent laoreet tincidunt feugiat. Aenean nec scelerisque purus. Praesent dapibus neque sed lorem feugiat sed
            accumsan elit auctor. Sed sed adipiscing felis. Etiam accumsan erat est, id tincidunt eros. Fusce porttitor magna vel
            risus cursus quis tincidunt diam dignissim. Proin ut lectus id magna facilisis lacinia. Donec dignissim, quam eu
            feugiat tempus, nunc mi pellentesque ligula, id interdum ipsum risus a tortor. Proin fringilla elementum leo in tempus.
            Pellentesque in metus lacus. Nullam volutpat purus in quam sollicitudin dapibus. In et nunc ante, sit amet tincidunt
            lorem.</p>

        </div>

    </li>
    <li>
        <a class="tab-heading" href="#second-tab">Second tab</a>

        <div id="second-tab" class="tab-content">

            <p>Nunc ut orci ipsum. Pellentesque eget turpis ut ipsum blandit mollis a non lacus. Vestibulum suscipit lacus sed erat
            viverra pretium sodales leo tincidunt. Aliquam erat volutpat. Etiam sit amet enim quis neque euismod aliquet.
            Pellentesque id quam velit. Phasellus bibendum sapien vel mi feugiat in vestibulum massa dapibus. Phasellus massa
            mauris, tincidunt vitae ultricies in, scelerisque fermentum dolor. Mauris fermentum aliquet gravida. Sed euismod nulla
   ...

CSS

.tabs {
    position:relative;
    margin:0;
    padding:0;
    list-style-type:none;
}
    .tab-heading,
    .tab-content {
        border:1px solid #ddd;
    }
        .tab-heading {
            float:left;
            display:block;
            margin-right:5px;
            padding:0 8px;
            border-bottom:none;
            line-height:2;
            text-decoration:none !important;
            background:#eee;
            color:#000;
        }
            .selected .tab-heading {
                position:relative; /* So we can set a z-index */
                background:#fff;
                z-index:25;
            }
        .tab-content {
            position:absolute;
            display:none;
            top:2em;
            right:0; /* Width must be specified in IE6 */
            left:0;
            padding:10px 8px;
            background:#fff;
        }
            .selected .tab-content {
                display:block;
                z-index:15;
            }
            .tab-content :last-child {
                margin-bottom:0;
            }

    /* No JS */
    .no-js .tabs .tab-heading {
        float:none;
        border:none;
        background:none;
    }
    .no-js .tabs .tab-content {
        position:static;
        display:block;
        margin-bottom:15px;
    }

JavaScript

$(function()
{
    /**
     * Tabs
     *
     * @description Very lightweight tabs for use with an un-/ordered list using existing markup based on <http://jsfiddle.net/i_like_robots/cc324/>
     * @example
     * <ul class="tabs">
     *     <li>
     *         <a class="tab-heading" href="#[id]">[*]</a>
     *         <div id="[id]" class="tab-content">[*]</div>
     *     </li>
     * </ul>
     */
    $('ul.tabs')
        .delegate('a.tab-heading', 'click', function(e)
        {
            e.preventDefault();

            var $this = $(this);

            if ($this.parent().hasClass('selected')) return;

            $this
                .parent()
                .addClass('selected')
                .siblings()
                .removeClass('selected')
                .end() // In case there are no siblings
                .parent()
                .css('height', $this.outerHeight(true) + $this.next('div.tab-content').outerHeight(true));
        })
        .find('a.tab-heading')
        .first()
        .trigger('click');
});