Отобразить / скрыть блоки div при помощи button

Question

По умолчанию показано 4 блока, при нажатии на кнопку show 1 показать только блоки show_1, при нажатии show 2, показать только блоки show_2, при нажатии кнопки show all показать все блоки.

<div class="button-blcok">
  <div class="wrapper">
      <button  class="myBtn">show 1</button>
      <button  class="myBtn">show 2</button>
  </div>
  <button  class="myBtn">show all</button>
</div>

<div class="content-box">
    <div class="show_1 content__tittle"></div>
    <div class="show_1 content__tittle"></div>
    <div class="show_2 content__tittle"></div>
    <div class="show_1 content__tittle"></div>
</div>

.button-blcok{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 45px;
    .wrapper{
        margin-right: auto;
    }
}


.content-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .content__tittle{
        margin: 10px;
        width: 450px;
        height: 200px;
    }
    .show_1{
        background: rgb(190, 119, 119);
    }
    .show_2{
        background: rgb(155, 4, 4);
    }
}

Answer 1

Алгоритм следующий:

Повесить события клика на каждую кнопку (допустим при загрузке страницы) (для этого добавил id к кнопкам)
В функции клика сначала скрыть все элементы класса "show" (так же добавил в html) и после выбрав элементы с нужным классом отобразить их.
По кнопке "All" просто показываем все блоки.

Если разных блоков будет много и дублировать код не охота, то можно использовать атрибут data-* (с номером класса) или номер идентификатора кнопки.

  // выбираем кнопку
    document.getElementById('btn1').addEventListener('click', function()        {
      // Выбираем все элементы класса show
        let blocks =  document.querySelectorAll('.show');
      // скрываем их
      blocks.forEach(block => {
            block.style.display = "none";
      });
      // Выбираем все элементы нужного класса
        blocks =  document.querySelectorAll('.show_1');
      // отображаем их
      blocks.forEach(block => {
            block.style.display = "block";
      });
  });

    document.getElementById('btn2').addEventListener('click', function()        {
        let blocks =  document.querySelectorAll('.show');
      blocks.forEach(block => {
            block.style.display = "none";
      });
        blocks =  document.querySelectorAll('.show_2');
      blocks.forEach(block => {
            block.style.display = "block";
      });
  });
  
  // кнопка all просто отображаем все элементы
    document.getElementById('btnall').addEventListener('click', function()      {
        let blocks =  document.querySelectorAll('.show');
      blocks.forEach(block => {
            block.style.display = "block";
      });
  });

.button-blcok {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 45px;
}
.button-blcok .wrapper {
  margin-right: auto;
}

.content-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.content-box .content__tittle {
  margin: 10px;
  width: 450px;
  height: 200px;
}
.content-box .show_1 {
  background: #be7777;
}
.content-box .show_2 {
  background: #9b0404;
}

<div class="button-blcok">
  <div class="wrapper">
      <button  id="btn1" class="myBtn">show 1</button>
      <button  id="btn2" class="myBtn">show 2</button>
  </div>
  <button id="btnall" class="myBtn">show all</button>
</div>

<div class="content-box">
    <div class="show_1 show content__tittle">1</div>
    <div class="show_1 show content__tittle">1</div>
    <div class="show_2 show content__tittle">2</div>
    <div class="show_1 show content__tittle">1</div>
</div>

Answer 2

Немного коряво, но что бы не изменять html структуру только так. Конечно в идеале повесить на разные кнопки разные классы и скрывать и показывать блоки при помощи добавления/удаления класса, но как уже сказал без изменения html только так:

const arrayBtns = [...document.querySelectorAll('.button-blcok .wrapper .myBtn')];
const showAllBtn = document.querySelector('.button-blcok > .myBtn');
const allBlock = [...document.querySelectorAll('.content__tittle')];

arrayBtns.forEach((btn, index) => {
  btn.addEventListener('click', e => {
    allBlock.forEach(el => el.style.display = 'none');
    if(index === 0) {
      const show1 = document.querySelectorAll('.show_1');
      show1.forEach(sh => sh.style.display = 'block');
    }
    if(index === 1) {
      const show2 = document.querySelectorAll('.show_2');
      show2.forEach(sh => sh.style.display = 'block');
    }
  });
});
showAllBtn.addEventListener('click', e => {
  allBlock.forEach(el => el.style.display = 'block');
});

БЛОГ НА HUSL

Отобразить / скрыть блоки div при помощи button

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