Одна кнопка убирает div, вторая возвращает этот div

Question

Необходимо чтобы, при нажатии на одну кнопку, div пропадал, а при нажатии на вторую - div появлялся. У меня в коде сейчас одна кнопка делает возврат и появление обратно. Нужно чтобы всё отдельно было.

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>
<style>
  .btn,
  .btn1 {
    text-decoration: none;
    text-align: center;
    width: 250px;
    padding: 20px 0;
    border: solid 1px #004F72;
    border-radius: 4px;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #E5FFFF;
    background-color: #3BA4C7;
    background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
    box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
    outline: none;
  }
  
  .content {
    margin-top: 20px;
    padding: 20px;
    border: solid 1px rgb(214, 218, 219);
    border-radius: 4px;
    font-family: Calibri, 'Trebuchet MS', sans-serif;
    width: 400px;
  }
  
  .hidden {
    display: none; // скрывает текст
  }
</style>

<body>

  <button class="btn1" type="button">
      Показать блок
  </button>
  <button class="btn" type="button">
      Скрыть блок
  </button>
  <div class="content hidden">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt numquam, minima unde dolore laudantium repellat suscipit iste eos vero debitis quae natus eius temporibus, magni doloribus doloremque, quasi fugiat minus!
  </div>

  <script>
    const btn1 = document.querySelector(".btn1");
    const btn = document.querySelector(".btn");
    const content = document.querySelector(".content");

    btn1.addEventListener("click", btn1Click);

    function btn1Click() {
      console.log(content.classList);

      if (content.classList.contains("hidden")) {} else {}
      content.classList.toggle("hidden");
    }
  </script>
</body>

</html>

Answer 1

Пример

const btnShow = document.querySelector(".btn-show");
const btnHide = document.querySelector(".btn-hide");
const content = document.querySelector(".content");

function showContent() {
  content.classList.remove('hidden')
}

function hideContent() {
  content.classList.add('hidden')
}

btnShow.addEventListener("click", showContent);
btnHide.addEventListener("click", hideContent);

[class*=btn-] {
  text-decoration: none;
  text-align: center;
  width: 250px;
  padding: 20px 0;
  border: solid 1px #004F72;
  border-radius: 4px;
  font: 20px Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #E5FFFF;
  background-color: #3BA4C7;
  background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
  box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
  outline: none;
}

.content {
  margin-top: 20px;
  padding: 20px;
  border: solid 1px rgb(214, 218, 219);
  border-radius: 4px;
  font-family: Calibri, 'Trebuchet MS', sans-serif;
  width: 400px;
}

.hidden {
  display: none;
}

<button class="btn-show" type="button">Показать блок</button>
<button class="btn-hide" type="button">Скрыть блок</button>
<div class="content hidden">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt numquam, minima unde dolore laudantium repellat suscipit iste eos vero debitis quae natus eius temporibus, magni doloribus doloremque, quasi fugiat minus!
</div>

БЛОГ НА HUSL

Одна кнопка убирает div, вторая возвращает этот div

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