Tabbed Content DEV

by moob

HTML

<div class="tabbed">
    <ul>
        <li><a href="#t1">Tab One</a>
        </li>
        <li><a href="#t2">Tab Two</a>
        </li>
        <li><a href="#t3">Tab Three</a>
        </li>
        <li><a href="#t1">Tab Four</a>
        </li>
        <li><a href="#t2">Tab Five</a>
        </li>
        <li><a href="#t3">Tab Six</a>
        </li>
    </ul>
    <div id="t1">content one</div>
    <div id="t2">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</div>
    <div id="t3">content three</div>
</div>

CSS

body {
    font:1em Arial, sans-serif;
}
.tabbed {
    display:block;
    position:relative;
    background:#cccccc;
    padding:4px 0 0 0;
}
.tabbed > ul {
    display:none;
    position:relative;
    list-style:none;
    padding:0;
    margin:0 0 -1px 0;
}
.tabbed > ul {
    display:block;
}
.tabbed > ul li {
    display:inline-block;
}
.tabbed > ul li a {
    display:inline-block;
    margin:0 -6px 0 4px;
    border:1px solid black;
    opacity:0.5;
    background: #fff;
    padding:10px;
    border-bottom:0px;
    border-radius:4px 4px 0 0;
    text-decoration:none;
    color:black;
}
.tabbed > ul li.active a {
    opacity:1;
    background: #fff;
    border-bottom:1px solid white;
}
.tafbbed > ul.isWrapping li a {
    margin:0 -6px 4px 4px;
    border:1px solid black!important;
    border-radius:4px;    
}
/*.tabbed > ul.isWrapping li.active {
    float:right;
    bottom:0;
    left:0;
}*/
.tabbed > div {
    display:block;
    border: 1px solid black;
    background: #fff;
    padding:20px;
}

JavaScript

(function ($) {
    $.fn.extend({
        tabme: function () {

            function href(el) {
                hash = $(el).find('a').attr('href');
                return hash;
            }
            function setActive(el) {
                deactivateOthers(el);
                $(el).addClass('active');
                $(href(el)).show();
            }            
            function deactivateOthers(el) {                
                $(el).siblings('li').each(function () {
                    $(this).removeClass('active');
                    $(href(this)).hide();
                });
            }
            function setActiveViaHash(el) {
                var matched = $(el).find('a[href=' + location.hash + ']');
                if (location.hash && matched.length > 0) {
                    setActive(matched.parent());
                };
            }


            return this.each(function () {
                var self = this;                

                //triggers
                $(this).find('li').on('click', function () {
                    setActive(this);
                });

                //default active
                var firstActive = ($(this).find('li.active').length > 0) ? $(this).find('li.active') : $(this).find('li:first');
                firstActive.click();

                //location hash
                if (location.hash) {
                    setActiveViaHash(self);
                }

                if ("onhashchange" in window) {
                    window.onhashchange = setActiveViaHash(self);
                }
                
                //deal with wrapping tabs
                function sortWrapping() {
                    //is the tab parent taller than a single child. If so its probably wrapped
                    var parentH = $(self).find('ul:first').height();
                    var childH = $(self).find('li:first').outerHeight(true);
                    //console.log(parentH+" / "+childH);
                   ...