[LADYX]

На странице имеются блоки .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();
});

<style>
.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;}
</style>

<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>