隐藏过滤器选项卡上的加载更多按钮，全部（jQuery）除外

Question

I have a filterable tabs and photos by categories. The first category is All, and 4 more categories. I have two functions:

1. Is for filtering:

    $(function() { $(".filter_portfolio li").on('click', function() { let category = $(this).attr("data-filter"); $(".filter_portfolio li").removeClass("active"); $(this).addClass("active"); let item = $(".portfolio.portfolio_item"); item.fadeOut("slow"); item.each(function() { if ($(this).hasClass(category)) { $(this).fadeIn(1000); } }); }); });

2. Is for Load more button loading 12 more photos

    $(function (){ const elements = $(".portfolio_item.invisible"); $(".portfolio_item ").slice(0, 12).show(); if ($(elements).length.== 0) { $(".load_btn");show(). } $(".load_btn"),on('click'. function() { $('.portfolio_item:invisible.hidden'),slice(0. 12);slideDown( "slow" ). if ($(".portfolio_item:invisible.hidden").length === 0) { $(".load_btn");fadeOut("slow");} }); });

The problem is that I can't manage to show this.load_btn in All category, but not to show in all other categories.

I tried to add this code to the first function

if (!$(".filter_cat", ".active").hasClass('loadbtn')) {
    $(".load_btn").hide();
} else {
    $(".load_btn").show();
}

**First function with the if else statement **

        $(function() {
        $(".filter_portfolio li").on('click', function() {
        let category = $(this).attr("data-filter");
        $(".filter_portfolio li").removeClass("active");
        $(this).addClass("active");
        let item = $(".portfolio .portfolio_item");
        item.fadeOut("slow");
        item.each(function() {
        if ($(this).hasClass(category)) {
        $(this).fadeIn(1000);
        }
        if (!$(".filter_cat", ".active").hasClass('loadbtn')) {
        $(".load_btn").hide();
        } else {
        $(".load_btn").show();
        }
        });
        });
        });

But when I click on other tabs, then go back to the All tab, the loadmore button is not there.

This is the HTML:

 //Filter $(function() { $(".filter_portfolio li").on('click', function() { let category = $(this).attr("data-filter"); $(".filter_portfolio li").removeClass("active"); $(this).addClass("active"); if ($(this).hasClass('loadbtn')) { $(".load_btn").show(); } else { $(".load_btn").hide(); } let item = $(".portfolio.portfolio_item"); item.fadeOut("slow"); item.each(function() { if ($(this).hasClass(category)) { $(this).fadeIn(1000); } }); }); }); //Load more 12 + 12 $(function (){ const elements = $(".portfolio_item.invisible"); $(".portfolio_item").slice(0, 12).show(); if ($(elements).length.== 0) { $(".load_btn");show(). } $(".load_btn"),on('click'. function() { $('.portfolio_item:invisible.hidden'),slice(0. 12);slideDown( "slow" ). if ($(".portfolio_item:invisible.hidden").length === 0) { $(".load_btn");fadeOut("slow");} }); });

 .portfolio_item { display: block; }.portfolio_item.invisible { display: none; }.filter_portfolio { display: flex; margin: 93px auto 69px; justify-content: center; width: 65%; align-items: center; list-style: none; }.filter_cat { padding: 13px 15px; color: #717171; font-size: 14px; line-height: 42px; flex-basis: 20%; text-align: center; cursor: pointer; border-top: 1px solid #DADADA; border-bottom: 1px solid #DADADA; }.filter_cat:nth-child(odd) { border-right: 1px solid #DADADA; border-left: 1px solid #DADADA; }.filter_cat.active { border: 2px solid #18CFAB; color: #18CFAB; }.portfolio { display: flex; width: 100%; flex-wrap: wrap; justify-content: space-between; }.load { text-align: center; margin-top: 70px; }.load_btn { padding: 22px 17px; border-radius: 3px; color: #FFFFFF; width: 170px; font-size: 14px; text-transform: uppercase; font-weight: 700; background-color: #18CFAB; border: none; cursor: pointer; justify-content: space-around; display: flex; margin: auto; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="filter_portfolio"> <li class="filter_cat active loadbtn" data-filter="all">All</li> <li class="filter_cat" data-filter="tab1">Tab1</li> <li class="filter_cat" data-filter="tab2">Tab2</li> <li class="filter_cat" data-filter="tab3">Tab3</li> <li class="filter_cat" data-filter="tab4">Tab4</li> </ul> <div class="portfolio"> <div class="portfolio_item all tab1"> Tab1 </div> <div class="portfolio_item all tab2"> Tab2 </div> <div class="portfolio_item all tab3"> Tab3 </div> <div class="portfolio_item all tab4"> Tab4 </div> <div class="portfolio_item invisible all tab1">Tab1.1</div> <div class="portfolio_item invisible all tab2">Tab2.1</div> <div class="portfolio_item invisible all tab3">Tab3.1</div> <div class="portfolio_item invisible all tab4">Tab4.1</div></div> <div class="load"><button class="load_btn"><i class="fas fa-plus"></i> Load more</button></div>

Answer 1

Ok, I found the reason. From the portfolio_item invisible items - remove all class by default. And add this class only when the click is triggered on the Load more button.