自动隐藏可选项内的“加载更多”按钮

Question

I am working on a photo album page using bootstrap tabbable. In this page each tab holds rows of images, the first row was shown as default while other rows are hided. When pressing the "load more" button, one more row would be shown. Please check this Bootply for easy understanding.

My problem is that I don't know how to hide my "load more" button when all contents are shown. The problem is a bit complicated for me as I want to reset my 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;
});

Answer 1

I've changed the approach a little.

• Every time you click the load more button, the code looks between the current tab hidden divs, and shows the first one.
• If the length of hidden divs (in the current tab page) is <= 1 , then you have to hide the .loading button
• each time you change tab, you have to show the .loading button

note that I've assigned an unique id to each div.more , but you can get rid of it as it is 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 () {
    //--- get all divs
    var divs = $("div.tab-pane.active div.more:hidden");
    if (divs.length <= 1) $(".loading").hide();

    //--- show the first hidden
    $(divs).eq(0).show();
});

$("li.tab").click(function () {
    $(".loading").show();
    $("div.more").hide();
});

CSS

div.more{
    display:none;
}

Hope it helps