Tabbed else Accordion DEV v3

by moob

HTML

<script src="http://tysonmatanich.github.io/elementQuery/elementQuery.min.js"></script>
<div id="testContainer">
    <div class="tabbed">
    <ul>
        <li><a href="#t1">Tab One one on eone oen oene oneon oen </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">
        <div>
            <h1>content one</h1>
            Please ensure that your content is wrapped in a div or something. DO NOT apply styles to the `section`</div>
    </section>
    <section id="t2">
        <div>
            <h1>content two</h1>
            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">
        <div><h1>content three</h1>
            Fusce dapibus, tellus ac cursus commodo</div>
    </section>
    <section id="t4">
        <div><h1>content four</h1>
            Fusce dapibus, tellus ac cursus commodo</div>
    </section>
    <section id="t5">
        <div><h1>content five</h1>
            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">
        <div><h1>content six</h1>
            Fusce dapibus, tellus ac cursus commodo</div>
    </section>
</div>
</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 {

    z-index:200;
}
.tabbed .overflowTabsParent:hover .overflowTabs {
    display: block;
}
.tabbed .overflowTabs {
    display: none;
    margin: -1px 0 0 0;
    padding: 0;
    position: absolute;
    right: 0;
    left:0px; right:0px;
    top: 100%;
    min-width:200px;    
    border-top:1px solid #666;
}
.tabbed .overflowTabs li {
    display: block;
    width:100%;
}
.tabbed .overflowTabs li {
    background-color:rgba(255,255,255,.9);
}
.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;
    background-color:#fff;
}
.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;
   ...

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 > div").slideUp(200)
                        $(self).find(".open").removeClass("open");
                        
                        $(self).find(".active").removeClass("active");
                        elm.addClass('open');                        
                        elm.find("div:first").slideDown(200);
                        $(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");
                        
                        /*$(".overflowTabs").hide();
                        elm.focus(); 
                        $(".overflowTabsParent").blur();
                        $(".overflowTabs").removeAttr("style");*/
                        
                    }
                }

                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;

                //Set up html for if its viewed as an accordion
                //clone tab links to their accordion sections
                $(self).find("li a").each(function () {
                    var hash = $(this).attr('href');
                    var section = $('section'+hash);
                    section.wrapInner("<div></div>")
                    $(this).clone().prependTo('section'+hash);
                });
                
               ...