Как скрыть и показать элемент по клику на кнопку на JS

Содержание

1 Вариант 1
- 1.1 Пример 1
2 Вариант 2
- 2.1 Пример 2

Цель: код на Javascript который будет скрывать и показывать html-элемент по клику на кнопку или любой другой элемент страницы.

Вариант 1

<div id="hidden-element">Этот элемент будет скрываться и появляться.</div>

<script>
  document.getElementById('click-to-hide').addEventListener("click", hiddenCloseclick);
        function hiddenCloseclick() {
        let x = document.getElementById('hidden-element');
      if (x.style.display == "none"){
          x.style.display = "block";
          } else {
         x.style.display = "none"}
    };
        
  </script>
<style>#hidden-element {display:none} </style>

id="hidden-element">Этот элемент будет скрываться и появляться.

document.getElementById('click-to-hide').addEventListener("click", hiddenCloseclick);

function hiddenCloseclick() {

let x = document.getElementById('hidden-element');

if (x.style.display == "none"){

x.style.display = "block";

} else {

x.style.display = "none"}

};

#hidden-element {display:none}

Необходимо указать один id элементу по которому нужно кликать чтобы вызвать событие, а второй id нужно присвоить элементу который будет скрываться/появляться. И здесь соответственно:

hidden-element – id элемента, который скрывается;
click-to-hide – id элемента, который кликают.

Здесь стили «style» указаны для элемента hidden-element, чтобы тот был скрыт изначально.

Пример 1

Привет, дружище! Как ты уже догадался, этот абзац скрывается кнопкой «Нажими меня!»!

Вариант 2

<div id="hidden-element">Этот элемент будет скрываться и появляться.</div>
<script>
        function hiddenClickButton() {
        let x = document.getElementById('hidden-element');
      if (x.style.display == "none"){
          x.style.display = "block";
          } else {
         x.style.display = "none"}
    };
  </script>
<style>#hidden-element {display:none;}</style>

id="hidden-element">Этот элемент будет скрываться и появляться.

function hiddenClickButton() {