Tabs dropdown

by Dhanck

HTML

<div class="tabdrop">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
    <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
    <li><a href="#tab5" data-toggle="tab">Section 5</a></li>
    <li><a href="#tab6" data-toggle="tab">Section 6</a></li>
    <li><a href="#tab7" data-toggle="tab">Section 7</a></li>
    <li><a href="#tab8" data-toggle="tab">Section 8</a></li>
    <li><a href="#tab9" data-toggle="tab">Section 9</a></li>
    <li class="dropdown pull-right tabdrop">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="icon-align-justify" id="lastTabs"></i> <b class="caret"></b></a>
      <ul class="dropdown-menu" id="collapsed">

      </ul>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    <div class="tab-pane" id="tab3">
      <p>Howdy, I'm in Section 3.</p>
    </div>
    <div class="tab-pane" id="tab4">
      <p>Howdy, I'm in Section 4.</p>
    </div>
    <div class="tab-pane" id="tab5">
      <p>Howdy, I'm in Section 5.</p>
    </div>
    <div class="tab-pane" id="tab6">
      <p>Howdy, I'm in Section 6.</p>
    </div>
    <div class="tab-pane" id="tab7">
      <p>Howdy, I'm in Section 7.</p>
    </div>
    <div class="tab-pane" id="tab8">
      <p>Howdy, I'm in Section 8.</p>
    </div>
    <div class="tab-pane" id="tab9">
      <p>Howdy, I'm in Section 9.</p>
    </div>
  </div>
</div>

<div class="btn btn-default" id="btnAdd">Add New Tab</div>

CSS

Body {
  margin: 30px;
}

.tabbable .nav-tabs {}

JavaScript

function tabdrop() {
    var tabs = $('.tabdrop .nav');
    var tabswidth = $('.tabdrop .nav').width();
    var tabsHeight = tabs.innerHeight();

    if (tabsHeight >= 45) {   //Set height value
      while (tabsHeight > 45) {
        var children = tabs.children('li:not(:last-child)');
        var count = children.size();
        $(children[count - 1]).prependTo('#collapsed');

        tabsHeight = tabs.innerHeight();
      }
    };

    if ($("#collapsed").has("li").length == 0) {
      $('#collapsed').parent().hide();
    } else {
      $('#collapsed').parent().show();
    }
  };
  //function dropcheck(){};
  
	tabdrop(); //Run after adding buttons
  
// Dynamic Tabs
$('#btnAdd').click(function (e) {
  	var nextTab = $('.tabdrop .nav li').size();
  	// create the tab
  	$('<li><a href="#tab'+nextTab+'" data-toggle="tab">Tab '+nextTab+'</a></li>').appendTo('.tabdrop .nav');
  	
  	// create the tab content
  	$('<div class="tab-pane" id="tab'+nextTab+'">tab' +nextTab+' content</div>').appendTo('.tab-content');
  	
  	// make the new tab active
  	$('.tabdrop .nav a:last').tab('show');
    
tabdrop(); //Run after adding buttons
});


  //$(window).on('resize', tabdrop()); // when window is resized

//$('.tabdrop .nav').resize(tabdrop());