Tabbed else Accordion 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="#t4">Tab Four</a></li><!-- 
        --><li><a href="#t5">Tab Five</a></li><!-- 
        --><li><a href="#t6">Tab Six</a></li>
    </ul>
    <section id="t1">
        <a href="#t1">Tab One</a>
        <div>content one</div>
    </section>
    <section id="t2">
        <a href="#t2">Tab Two</a>
        <div>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>
    </section>
    <section id="t3">
        <a href="#t3">Tab Three</a>
        <div>content three</div>
    </section>
    <section id="t4">
        <a href="#t4">Tab Four</a>
        <div>content four</div>
    </section>
    <section id="t5">
        <a href="#t5">Tab Five</a>
        <div>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>
    </section>
    <section id="t6">
        <a href="#t6">Tab Six</a>
        <div>content six</div>
    </section>
</div>

CSS

/* apply a natural box layout model to all elements */
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
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;
    white-space:no-wrap;
}
.tabbed > ul li {
    display:inline-block;
    margin:0;
}
.tabbed > ul > li > a {
    display:inline-block;
    margin:0 0 0 4px;
    border:1px solid black;
    opacity:0.5;
    background: #fff;
    padding:10px;
    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;
}
.tabbed > ul.isWrapping li a {
    margin:0 -6px 4px 4px;
    border:1px solid black!important;
    border-radius:4px;
}
.tabbed .overflowTabsParent {
    position:relative;
    z-index:200;
}
.tabbed .overflowTabsParent:hover .overflowTabs {
    display: block;
}
.tabbed .overflowTabs {
    display: none;
    margin: -1px 0 0 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    width:200px;    
    border-top:1px solid #666;
}
.tabbed .overflowTabs li {
    display: block;
    width:100%;
}
.tabbed .overflowTabs li {
    background-color:white;
}
.tabbed .overflowTabs li a {
    display:block;
    margin:0;
    padding:10px;
    opacity:1;
    border:1px solid #666;
    border-radius:0;
    border-top-width:0;
}
.tabbed .overflowTabs li a:hover {
    color:red;
}
.tabbed .overflowTabs li.active a {
    color:#333;
}
.tabbed .overflowTabs li.active a:before {
    content:' ';
    display:inline-block;
    vertical-align:middle;
    width:0;
    font-size:0;
    border:6px solid transparent;
    border-left-color:#333;
}



.tabbed > section {
    display:none;
  ...

JavaScript

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

                function setActive(self, $el) {
                    //console.log($el);
                    var hash = $el.attr('href');
                    var elm = $(hash);
                    if(elm.length > 0){
                        $(self).find(".open").removeClass("open");
                        $(self).find(".active").removeClass("active");
                        elm.addClass('open');
                        $(self).find('a[href='+hash+']').parent().addClass('active');
                        //set the overflow tab as active
                        $(self).find('ul ul.overflowTabs li.active').parent().parent().addClass("active");
                    }
                }

                function setActiveViaHash(self,hash) {
                    var matched = $(self).find("a[href='" + hash + "']");
                    if (hash && matched.length > 0) {
                        setActive(matched);
                    }
                }


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

                //triggers
                $(this).find("a[href^='#']").on("click", function () {
                    setActive(self, $(this));
                });

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

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

                if ("onhashchange" in window) {
                    window.onhashchange = setActiveViaHash(self, location.hash);
                }

                //deal with wrapping tabs
                function sortWrapping() {
                    //is the tab parent taller than a single child. If so its probably wrapped
                    var parentH =...