Как сделать показ разного количества блоков при разной ширине на js?

Question

[Niki21212]

Сейчас у меня при ширине 768px показаны 6 блоков, остальные срыты, есть кнопка которая показывает все блоки. Нужно, чтобы при ширине 1120px показывало 8 блоков. Как это сделать на js?

function openbox(logo) {
   display = document.getElementById(logo).style.display;
  if(display=='none'){
      document.getElementById("button").innerText = "Скрыть";  
      document.getElementById(logo).style.display='flex';
   }else{
      document.getElementById("button").innerText = "Показать все";
      document.getElementById(logo).style.display='none';
     }  
 };

<section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>

        <div id="logo">

        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>
        <section></section>

        </div>
    
    
    <button class="slider-main__button-read-more" id="button" onclick="openbox('logo');  return false">Показать все</button>

#logo {
display: none
}

Comments

[Alex]

Когда же вы научитесь https://developer.mozilla.org/ru/docs/Web/API/HTML...

Answer 1

[yuchiko]

Сделайте для них общий родитель и при загрузке DOM элементов посчитайте ширину окна.
А затем пройдитесь по children этого родителя и при нужном index === 6 или 8 начните добавлять hidden.
https://developer.mozilla.org/ru/docs/Web/API/Pare...

Если хотите и при смене размера экрана подписаться:
https://developer.mozilla.org/ru/docs/Web/API/Wind...
то ту же функцию можно вызывать и тут