Как спрятать элементы по нажатию на кнопку?

Question

[makboriska]

Есть задача, на странице элементы (тег a), их больше 12 штук, но нужно показать только 12, а другие показывать только при нажатии на кнопку "Показать ещё", с этим я справился. Теперь надо сделать что бы на эту же кнопку эти элементы скрывались. Я не селен в JS, дали тестовое на джуна, дали цикл (выводятся ссылки циклом), сказали сделай вот эту задачку, я что-то вообще запутался..

Вот код

var $tdm = $('.lawyers-grid');
$tdm.each(function () {
  var $item = $(this).find('a'),
      $item_target = $item.filter(function () {
        return $(this).index() > 11
      });
  var $link = $('.lawyers-open-btn').click(function () {
    $item_target.slideDown("200");
  });
  $item_target.hide().eq(0);
});

Comments

[Сергей Сергей]

OGuman, распиши логическую цепочку своих мыслей, чтобы не только лишь я мог понять, почему завод плохое место, чтобы думать.

[Andry]

Сделай шаг назад и осмотрись шире.
CSS умеет адресовать элементы по порядковому номеу :nth-child
Кнопочкой добавляй/удаляй класс контейнеру ссылок.
показать/скрыть
с помощью css показывай/прячь дополнительные элементы.

.link-container:not(.link-container--show-all) a:nth-child(4){
display:none;
}

какось так.

[makboriska]

Андрей, да это я знаю, но я не знаю сколько будет элементов заранее их сейчас 16, а может быть 24

[Andry]

makboriska, учитесь решать задачу не только в лоб, но и смотреть по сторонам. Это с опытом приходит.

Показывайте сперва только 12, потом все подряд. Вам без разницы их общее к-во.

https://css-tricks.com/almanac/selectors/n/nth-child/

[Сергей Сергей]

Какой интересный завод. Думалось, заводские сайты по остаточному принципу обслуживаются, и веб-программисты там не нужны.
Что ж. Могу посоветовать почитать о функциях slice и slideToggle, для начала.

[makboriska]

Сергей Сергей, slideToggle использую. Да завод, вычеслительной техники.

Answer 1

[Vindicar]

Запиши первоначально скрытые элементы в массив, и храни этот массив.
Используй его и для скрытия и для показа.

Answer 2

[OGuman]

Вот функционал, если добавить кнопку и при нажатии на нее вызывать функцию linksReload, элементы будут появляться/скрываться.

var hide = true;

function linksReload(){
    hide=!hide;
    for(var i=0;i<=$('.lawyers-grid > a').length-1;i++){
    	if(i>5 && hide){
        	$(`.lawyers-grid > a:eq(${i})`).hide();
        }
        else if (i>5){
            $(`.lawyers-grid > a:eq(${i})`).show();
        }
    }
}