Как отобразить ограниченное кол-во элементов и при клике на ссылку отключить отображение?

Question

[KarlosSatana]

В контейнере есть 24 элемента, по умолчанию отображается только 6 элементов в случайном порядке. Как отключить эту функцию, если клик будет сделан по другим ссылкам из списка и вернуть её, когда кликнули по ссылке "Вся мебель" ?

<a href="#"> Вся мебель </a>
<a href="#"> Столы </a>
<a href="#"> Стулья </a>
<a href="#"> Шкафы </a>
<a href="#"> Кровати</a>

<div class="container">
    <article>1</article>
    ...
    <article>24</article>

$(document).ready(function() {
  var container = document.querySelector('.container');
  var articles = Array.apply(null, container.querySelectorAll('article'));

  var m = articles.length,
    t, i;

  while (m) {
    i = Math.floor(Math.random() * m--);
    t = articles[m];
    articles[m] = articles[i];
    articles[i] = t;
    container.removeChild(articles[m]);
  }

  while (m < 6)
    container.appendChild(articles[m++]);
});

Comments

[Александр Лысенко]

Загрузите ваш код на codepen чтобы было понятно как все работает сейчас. Навскидку просто привяжите исполнение скрипта непосредственно к нужной вам ссылке

Answer 1

[Александр Лысенко]

https://codepen.io/anon/pen/vmwePP