Как показать только первые несколько элементов в блоке, а при клике показать остальные?

Question

На странице имеются блоки .container с вложенными в них элементами. Задача показывать только первые 3 элемента в блоке. И если в блоке больше трех элементов, то остальные прятать и выводить ссылку с количеством скрытых в блоке элементов. Подскажите, пожалуйста, как это можно реализовать? Благодарю!

$(document).ready(function() {
  $('.container').find('span:gt(2)').hide()
  $('.container').append('<div class="add">Ещё</div>');
  $('.add').append('<div class="number_hidden"></div>');
  $(".number_hidden").text($(".container span").length)
});
$(".add").click(function() {
  $(".container").find('span').show();
});

.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

Answer 1

Такое что ли?

$(".container").each(function(){
   const show = 3;
   let spans = $(this).children("span");

   if( spans.length > show){
      spans.slice(show).hide();

      const tpl = '<a href="#" class="add">Еще [num]</a>';
      let a = tpl.replace("[num]", spans.length - show);
      $(a).appendTo(this);
   }
});

$(".container").on('click', '.add', function(e){
   e.preventDefault();
   $(this).hide()
          .prevAll('span')
             .show();
});

.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.container span:nth-child(n+4){
  display: none;
}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

Answer 2

let max = 3;

$('.container').each(function(){
  let items = $(this).find('span'),
      len = items.length;
  if(len > max) {
    items = items.slice(max, len);
    items.wrapAll('<div class="-hidden"></div>');
    $(this).append('<div class="-show">+ ещё '+(len-max)+'</div>');
  }
}).on('click', '.-show', function(){
  $(this).closest('.container').find('.-hidden > span').unwrap();
  $(this).remove();
});

.container span {
  display: inline-block;
  margin: 5px;
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.container .-hidden {
  display: none;
}

.container .-show {
  display: inline-block;
  color: green;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

Answer 3

$(function() {
  $(".container").each(function() {
    let $span = $(this).find("span");
    if( $span.length <= 3 ) return;

    $span.slice(3).hide();    
    $(this).append('<a class="js-show">Еще ' + ($span.length - 3) + '...</a>');
  });
  
  $(".container").on("click", ".js-show", function() {
    $(this).siblings("span").show().end().remove();    
  });
});

.container span {display: inline-block; margin: 5px; width: 20px; height: 20px; border: 1px solid black;}

.add {display: inline-block; border: none; cursor: pointer;}

.number_hidden {display: inline-block; border: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

<div class="container">
  <span>1</span>
  <span>2</span>
</div>

Но есть вероятность, что оно будет дергаться, пока дождеться до загрузки HTML, чтобы скрыть лишнее. Поэтому можно изначально в CSS указать невидимость: Их всего три, поэтому не сложно вручную добавить:

.container span { display: none; }
.container span:nth-child(1),
.container span:nth-child(2),
.container span:nth-child(3) { display: inline-block; }

БЛОГ НА HUSL

Как показать только первые несколько элементов в блоке, а при клике показать остальные?

Ответы (3 шт):