JQuery Как показать/скрыть дополнительные элементы

Question

У меня есть список, который скрывает все предметы после показа 2 предметов. Я хочу показывать и скрывать элементы в отдельных группах (Показать больше), когда они скрыты, и (Показывать меньше) при расширении. Как мне это сделать?

Вот мой код и fiddle

$(document).ready(function() { 
    // alert("hello"); 
    // $("div.cards:gt(2)").hide(); 
    $("div.cards").find("div:gt(4)").hide(); 
    $("div.cards").has("div:nth-child(5)").after("<p class=\"showhide\">Show More</p>"); 

});i 

Answer 1

Вы можете использовать простое решение с помощью CSS и JQuery, как

$(document).ready(function() { 
 
    $("div.cards").has("div:nth-child(5)").append('<p class="showhide">Show More</p>'); 
 
    $("div.cards .showhide").click(function() { 
 
    var $this = $(this), 
 
     $cards = $(this).closest('.cards'); 
 
    $cards.toggleClass('open'); 
 
    $this.text($cards.hasClass('open') ? 'Show less' : 'Show more') 
 
    }); 
 
});

.cards > div:nth-child(n+3) { 
 
    display: none; 
 
} 
 
.cards.open > div:nth-child(n+3) { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="cards"> 
 
    <div class="random_cms-class"> 
 
    <div class="card">a</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">b</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">c</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">d</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">e</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">f</div> 
 
    </div> 
 
</div> 
 
<div class="cards"> 
 
    <div class="random_cms-class"> 
 
    <div class="card">.1</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">.2.</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">.3.</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">.4</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">.5.</div> 
 
    </div> 
 
    <div class="random_cms-class"> 
 
    <div class="card">.6.</div> 
 
    </div> 
 
</div>

Answer 2

Вам просто нужно настроить событие щелчка для элемента showhide, который переключает скрытые, чтобы быть видимыми, и наоборот.

$(document).ready(function() { 
    $(".cards").find(":gt(4)").hide(); 
    $(".cards").append("<p class=\"showhide\">Show More</p>"); 
    $(".cards").on("click", ".showhide", function(ev) { 
     var showhide = $(this); 
     var container = showhide.parent(); 
     if (showhide.text() == "Show More") { 
      container.find(":gt(4)").show(); 
      showhide.text("Show Less"); 
     } else { 
      container.find(":gt(4)").hide(); 
      showhide.text("Show More"); 
     } 
    }); 
});