How to hide/reveal a block when clicking on one button?

function questionDisplay() {
  let qBtn = document.querySelector(".question");
  let qTextShow = document.createElement("div");
  qBtn.addEventListener("click", ifElse)

  function ifElse() {
    if(qBtn !== true) {
      qTextShow.className = "info_q";
      qTextShow.innerHTML = `text`
      qBtn.appendChild(qTextShow);
      qTextShow.style.display = "block"
    } else {
      qTextShow.style.display = "none"
    }
  }
}
questionDisplay()

The qBtn button opens a div with text, but does not hide this block when clicking on it, how to fix it?

>Solution :

The most common way is to write your code in your HTML, rather than creating the element with document.createElement(), hiding it by default with CSS utility. class, then use .classList.toggle() to toggle that utility class. Like this:

const some_el = document.getElementById('some_id');

document.getElementById('show_text').addEventListener('click', () => some_el.classList.toggle('hidden'));

.hidden {
  display: none;
}

<div id="some_id" class="hidden">
  Some text
</div>

<button id="show_text">Show text</button>