javascript - Auto hide the "Load more" button inside tabbable -

javascript - Auto hide the "Load more" button inside tabbable -

i working on photo album page using bootstrap tabbable. in page each tab holds rows of images, first row shown default while other rows hided. when pressing "load more" button, 1 more row shown. please check bootply easy understanding.

my problem don't know how hide "load more" button when contents shown. problem bit complicated me want reset tabs after every tab switching events.

my code:

html:

<div class="tabbable"> <ul class="nav nav-tabs"> <li class="active" id="tab"><a href="#tab1" data-toggle="tab">tab1</a></li> <li id="tab"><a href="#tab2" data-toggle="tab">tab2</a></li> <li id="tab"><a href="#tab3" data-toggle="tab">tab3</a></li> </ul> </div> <div class="con-box"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div>row1-1</div> <div class="more" id="hidden1">row1-2</div> <div class="more" id="hidden2">row1-3</div> </div> <div class="tab-pane" id="tab2"> <div>row2-1</div> <div class="more" id="hidden1">row2-2</div> <div class="more" id="hidden2">row2-3</div> </div> <div class="tab-pane" id="tab3"> <div>row3-1</div> <div class="more" id="hidden1">row3-2</div> <div class="more" id="hidden2">row3-3</div> </div> </div> <div class="loading"><a>load more...</a></div> </div>

javascript:

var hidden = 1; $("div.more").hide(); $(".loading").click(function(){ $("div#hidden"+hidden).show(); hidden++; }); $("li#tab").click(function(){ $("div.more").hide(); hidden=1; });

i've changed approach little.

every time click load more button, code looks between current tab hidden divs, , shows first one. if length of hidden divs (in current tab page) <= 1, have hide .loading button each time alter tab, have show .loading button

note i've assigned unique id each div.more, can rid of not used

working example: http://www.bootply.com/p5lgmtsuiw

html

<div class="tabbable"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li> <li class="tab"><a href="#tab2" data-toggle="tab">tab2</a></li> <li class="tab"><a href="#tab3" data-toggle="tab">tab3</a></li> </ul> </div> <div class="con-box"> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div>row1-1</div> <div class="more" id="t1-1">row1-2</div> <div class="more" id="t1-2">row1-3</div> </div> <div class="tab-pane" id="tab2"> <div>row2-1</div> <div class="more" id="t2-1">row2-2</div> <div class="more" id="t2-2">row2-3</div> </div> <div class="tab-pane" id="tab3"> <div>row3-1</div> <div class="more" id="t3-1">row3-2</div> <div class="more" id="t3-2">row3-3</div> </div> </div> <div class="loading"><a>load more...</a> </div> </div>

js

$("div.more").hide(); $(".loading").click(function () { //--- divs var divs = $("div.tab-pane.active div.more:hidden"); if (divs.length <= 1) $(".loading").hide(); //--- show first hidden $(divs).eq(0).show(); }); $("li.tab").click(function () { $(".loading").show(); $("div.more").hide(); });

css

div.more{ display:none; }

hope helps

javascript jquery twitter-bootstrap