Hide every element under a div - Html

Emilien
April 11, 2023
256 views
1 vote
2 Answers

I’m looking for a way I can hide each <p></p> and show <h1></h1> instead on click of a button (onclick="javascript hide <p> show <h1>), and vise versa. I could do it with unique id but I cannot assign the same id for each. Is there any way to do it? preferably without jquery.

<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1>Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1>Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1>Text2</h1>
  </div>
</div>

Tags: html javascript

Answers

You can use the css selector > for direct child of, and say that the direct child p elements of div elements are all toggled the hidden class when the button is clicked. You could target more specifically with div > div > p or .SubTitle > p as well.

document.getElementById("p").addEventListener("click", () => {
  document.querySelectorAll("div > p")
    .forEach(el => el.classList.toggle("hidden"));
});
document.getElementById("h1").addEventListener("click", () => {
  document.querySelectorAll("div > h1")
    .forEach(el => el.classList.toggle("hidden"));
});

.hidden {
  display: none;
}

<button id="p">toggle p</button>
<button id="h1">toggle h1</button>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1>Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p>
    <h1>Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p>Text</p> 
    <h1>Text2</h1>
  </div>
</div>

Sure.

Here I add an event listener to a button.

I hid each p first, since I assume you want to show the title when the page loads.

Alternatively hide the Ps onload using script when loading the page:

allP.forEach(p => p.hidden = true);

Note: that will show the p’s while the page loads, but then again that also shows the user that there is data under each title

window.addEventListener("DOMContentLoaded", () => {
  const allP = document.querySelectorAll(".SubTitle p");
  const allH = document.querySelectorAll(".SubTitle h1");
  // allP.forEach(p => p.hidden = true);
  document.getElementById("toggle").addEventListener("click", (e) => {
    allP.forEach(p => p.hidden = !p.hidden);
    allH.forEach(h => h.hidden = !h.hidden);
  })
});

<button type="button" id="toggle">Toggle</button>
<div class="Title">
  <div class="SubTitle">
    <p hidden>Text</p>
    <h1>Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p hidden>Text</p>
    <h1>Text2</h1>
  </div>
</div>
<div class="Title">
  <div class="SubTitle">
    <p hidden>Text</p>
    <h1>Text2</h1>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Hide every element under a div – Html

Answers