i tried to add and remove the text of a box clicking on a different series of p this is the code. click1 is associated by text1 and same click2 text2 ecc. the goal i want to achieve is click on click1 and the only text that appears is text1 same thing for click2 text2 ecc.
let container = document.querySelector(".container");
container.addEventListener("click", ({
target
}) => {
if (target.nodeName !== "P") return; // return if p is not clicked
Array.from(document.querySelectorAll(".container1>p")).forEach(p => p.classList.remove("active1")); // make the others inactive
target.classList.toggle("active1");
})
.container1 p {
display: none;
}
.container1 p.active1 {
display:initial;
}
<div class="container">
<p class="active">click1</p>
<p>click2</p>
<p>click3 </p>
<p>click4</p>
<p>click5</p>
</div>
<div class="container1">
<p class="active1">
text1
</p>
<p>
text 2
</p>
<p>
text 3
</p>
<p>
text 4
</p>
</div>