c# - Create tab dynamically after some div in first tabs -

create tab dynamically after showing 20 div in first tab.actually generating div dynamically,there may 100 div generated dynamically.i want show 20 div in 1 tab , if there 100 div there automatically generate 5 tabs 20 div in each tabs.

<div id="tabbedpanels1" class="tabbedpanels">   <ul class="tabbedpanelstabgroup">     <li class="tabbedpanelstab" tabindex="0">tab1</li>     <li class="tabbedpanelstab" tabindex="0">tab2</li>    </ul>   <div class="tabbedpanelscontentgroup">      <div class="tabbedpanelscontent">         <div id="slider1" class="sliderwrapper">    <div class="contentdiv">  12345    </div> <div class="contentdiv">  12345    </div> </div> <div id="paginate-slider1" class="pagination">     </div> <div id="paginate1-slider1" class="pagination2">  </div>        </div>       </div>      </div> 

here created jsfiddle generates tabs dynamically based on number of contentdivs: http://jsfiddle.net/z6hn9/ , may achieve goal.

the html code:

<div id="tabs">     <ul id="tablinks"></ul> </div> 

the javascript code:

$(function () {      var neededdivcount = 100; // number of contentdivs test purposes     var divpertab = 20; // number of contentdivs / tabs test purposes      // create conentdivs dynamically test purposes      (var = 1; <= neededdivcount; i++) {         $("body").append('<div class="contentdiv">div' + + 'content</div>');     }      // create tabs , tablinks based on number of contentdivs in document      var neededtabcount = math.floor(($(".contentdiv").length - 1) / divpertab) + 1;     (var = 1; <= neededtabcount; i++) {         $("#tabs").append('<div id="tab' + + '"></div>');         $("#tablinks").append('<li><a href="#tab' + + '">tab' + + '</a></li>');     }      // loop through contentdivs , append them correct tab      $(".contentdiv").each(function (index) {         var appendtotabindex = math.floor(index / divpertab) + 1;         $(this).appendto($("#tab" + appendtotabindex));     });      $("#tabs").tabs(); });