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

Question

Сейчас у меня при ширине 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}

Answer 1

Немного изменил html и добавил один класс, который скрывает блок

<style>
.hide {
  display: none;
}
</style>

<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
<section>9</section>
<section>10</section>
<section>11</section>
<section>12</section>

JS

const sections = Array.prototype.slice.call(document.querySelectorAll('section'));
const btn = document.getElementById('button');
let count = 6;
let bool = true;

function showHide(bool){
  if(bool) {
    sections.forEach(function(section, index) {
      if(index >= count) section.classList.add('hide');
    });
  }else {
    sections.forEach(function(section) {
      section.classList.remove('hide')
    });
  }
}

btn.addEventListener('click', function(e) {
  bool = !bool;
  showHide(bool);
  btn.textContent = bool ? 'Показать все' : 'Скрыть';
});


if(window.innerWidth > 1120) count = 8;
showHide(bool);

БЛОГ НА HUSL

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

Ответы (1 шт):