Matthew's JQuery Tabbed Content

fiddle.css

body {
    width: 90%;
    margin: 1em auto;
    font: 0.75em/1.5 sans-serif;
    background: #CCC;
}

h1 {
    margin: 0 0 0.75em;
    font: bold 2em/1 sans-serif;
}

h2 {
    margin: 0 0 0.75em;
    font: bold 1.5em/1.5 sans-serif;
}

/* Prevent FOUC when JS is loading */
.js .tab-content:not(:first-child) {
        display:none;
}

.tab-wrap {
    padding: 1.5em 30px;
    margin-bottom: 1.5em;
    background: #fff;
    border: 1px solid #999;
}
.tab-content {
    overflow: hidden; /* Required in this case to account margins on child elements. */
}

.tab-nav {
    padding: 0;
    position: relative;
    margin-bottom: -1px;
    overflow: hidden;
    clear: both;
}

.tab-nav li {
    float: left;
    list-style: none;
}

.tab-nav a {
    display: block;
    margin: 0 -1px 0 0;
    padding: 0.75em 20px ;
    background: #EEE;
    border: 1px solid #999;
    color: #000;
    text-decoration: none;
}

.tab-nav .current a {
    background: #FFF;
    border-bottom: 1px solid #FFF;
}

fiddle.html

	<h1>Tab Test</h1>

	<div id="tabs1" class="tab-wrap">

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

			<h2>Tab 1</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit.</p>

		</div>

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

			<h2>Tab 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</p>
			<p>Primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo.</p>

		</div>

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

			<h2>Tab 3</h2>

<p>Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue.</p>

<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed.</p>

		</div>

	</div>


	<div id="tabs2" class="tab-wrap">

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

			<h2>Tab 4</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque.</p>

			<p>Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque.</p>

		</div>

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

			<h2>Tab 5</h2>
			<p>Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget.</p>
			<p>In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla.</p>

		</div>

	</div>

fiddle.js

/**
 * Example/Demo Usage
 */
$(document).ready( function () {

    $('#tabs1').mtfTabs({
        equalHeight: true
    });

    $('#tabs2').mtfTabs({
        hideTitle: false,
        hashLocation: false
    });

});


(function ($) {

    $.fn.mtfTabs = function (options) {

        return this.each(function () {

            var defaults = {
                hideTitle: true,
                equalHeight: false,
                hashLocation: true
            };

            options = $.extend(defaults, options);

            new mtfTabs($(this), options);

        });

    }

    mtfTabs = function (element, options) {

        var mtfTabs = element;

        mtfTabs.init = function () {

            mtfTabs.tabs = mtfTabs.children();

            mtfTabs.createNav();

            if (mtfTabs.selected == undefined)
                mtfTabs.selected = mtfTabs.tabs.first();

            if (options.hashLocation == true && '' != window.location.hash && mtfTabs.tabs.filter(window.location.hash).length > 0)
                mtfTabs.selected = mtfTabs.tabs.filter(window.location.hash);

            mtfTabs.updateClasses();

            if (options.equalHeight == true)
                mtfTabs.equalHeight();

            //Show/hide.
            mtfTabs.tabs.show();
            mtfTabs.tabs.not(mtfTabs.selected).hide();

            // The action.
            mtfTabs.nav.find('a').click(function (e) {

                if (options.hashLocation == true )
                    window.location.hash = $(this).attr('data-tab-target');

                e.preventDefault();

                //Update selected & Redraw.
                mtfTabs.selected = mtfTabs.tabs.filter($(this).attr('data-tab-target'));

                mtfTabs.tabs.show();
                mtfTabs.tabs.not(mtfTabs.selected).hide();

                mtfTabs.updateClasses();

            });

        }


        /**
         * Create the Tab Navigation
         */
        mtfTabs.createNav = function () {

            mtfTabs.nav = $('<ul class="tab-nav"></ul>');

            mtfTabs.tabs.each(function () {

                var newLink = $('<li><a href="#' + $(this).attr('id') + '" data-tab-target="#' + $(this).attr('id') + '">' + $(this).find('h2').first().text() + '</a></li>');

                mtfTabs.nav.append( newLink );

                if (options.hideTitle) {
                    $(this).find('h1,h2,h3').first().hide();
                }

            });

            element.before(mtfTabs.nav);

        }


        /**
         * Update all the classes to reflect the current state.
         */
        mtfTabs.updateClasses = function () {

            mtfTabs.nav.find('li').removeClass('current');
            mtfTabs.nav.find('a[data-tab-target="#' + mtfTabs.selected.attr('id') + '"]').parent().addClass('current');

            mtfTabs.tabs.removeClass('current');
            mtfTabs.tabs.filter(mtfTabs.selected).addClass('current');

        }

        /**
         * All tabs equal height
         *
         * Force tab element to height of tallest child
         * Note workaroud for calculating the height of hidden tabs.
         */
        mtfTabs.equalHeight = function () {

            var maxHeight = 0;

            mtfTabs.tabs.each(function () {

                if( $(this).is(':hidden') ) {

                    $(this).show();

                    ($(this).height() > maxHeight)
                        maxHeight = $(this).height();

                    $(this).hide();

                } else if ($(this).height() > maxHeight) {

                    maxHeight = $(this).height();

                }

            });

            mtfTabs.css('min-height', maxHeight + 'px');

        }

        mtfTabs.init();

    }

})(jQuery);

fiddle.manifest

name: Matthews jQuery Tabbed Content
description: simple tabbed content jQuery plugin
authors:
  - Matthew Haines-Young
resources:
  - /js/empty.js
normalize_css: yes

index.php

<!doctype html>
<!--[if lt IE 9]><html class="no-js oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
<head>

	<!-- no-js or js class to help prevent FOUC -->
	<script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>

	<meta charset="utf-8">

	<title>Matthew's Tabs</title>

	<meta name="viewport" content="width=device-width">

    <link href="../assets/normalize.css" media="screen" rel="stylesheet" type="text/css" />
    <link href="fiddle.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>

	<?php include( 'fiddle.html' ); ?>

	<script src="../assets/js/libs/jquery.min.js"></script>

	<script src="fiddle.js"></script>

</body>
</html>

See on JSFIDDLE http://jsfiddle.net/gh/gist/jquery/1.7.1/2283819/