Как сделать чтобы при нажатии на вкладку All отобразился контент с всех трех предыдущих вкладок на JS?

Question

[hulktoster]

Есть три вкладки с контентом, и четвертая новая (All) хочу сделать так чтобы при нажатии на All отобразился контент трех вкладок.
Я конечно мог бы в самом html cоздать div c названием All поместить контент всех вкладок туда, но думаю это плохая идея, потому что вкладок может быть штук 15 например или даже больше и на каждой страничке контент может быть очень большой, получится слишком большая html страница, возможно даже на несколько тысяч строк, если много контента...
Мне кажется наверное это можно как-то реализовать с помощью несколькоми строками на JS. Но как?
Код в песочнице:
https://jsfiddle.net/nathan111777/5dzrqu3b/4/

Answer 1

[0xD34F]

function openCity(e, city) {
  document.querySelectorAll('.tablink').forEach(n => {
    n.classList.toggle('active', city === 'All' || n === e.target);
  });

  document.querySelectorAll('.tabcontent').forEach(n => {
    n.style.display = city === 'All' || n.id === city ? 'block' : 'none';
  });
}

https://jsfiddle.net/wxz2koms/

Comments

[hulktoster]

спасибо) а как сделать так, чтобы когда нажал на линк all серым цветом подсветило только линк all а не все линки как сейчас?

[0xD34F]

hulktoster, подумайте.