Change div style display none to block and vice versa with javascript

April 4, 2023

I’m working on a page description that has a "saiba mais" button that when I click the button it expands and hides the description.
How can I do this with javascript?

That’s my code:

<div class="members-description">
  <h4>
    Text here
  </h4>
  <div class="about" id="about" style="display: none">
    <p>
      Text here
    </p>
    <p>
      Text here
    </p>
    <p>
      Text here
    </p>
    <p>
      Text here
    </p>
  </div>
  <a class="btn">Saiba Mais</a>
</div>

I need that when I click on the button it expands the description and when I click again it hides the description.
There’s a gif with the result I need.
expected outcome

Thanks to whoever answers the question and sorry if I couldn’t express my problem correctly.

>Solution :

const aboutDiv = document.getElementById("about");
const btn = document.querySelector(".btn");

btn.addEventListener("click", () => {
  if (aboutDiv.style.display === "none") {
    aboutDiv.style.display = "block";
    btn.textContent = "Esconder";
  } else {
    aboutDiv.style.display = "none";
    btn.textContent = "Saiba Mais";
  }
});