I have this code
var showcontent = document.querySelectorAll("#showcontent");
var allshowcontent = [document.getElementById("pinkshowscontent"), document.getElementById("redshowscontent"), document.getElementById("orangeshowscontent") ]
for(var i = 0; i < showcontent.length; i++) {
showcontent[i].addEventListener("click", function() {
var showcontentelement = document.getElementById(event.target.className + "content");
if (showcontentelement.style.display == "none") {
showcontentelement.style.display = "block";
}
var remove = allshowcontent.indexOf(showcontentelement);
if (remove > -1) {
allshowcontent.splice(remove, 1);
}
if (allshowcontent[0].style.display == "block") {
allshowcontent[0].style.display = "none";
}
if (allshowcontent[1].style.display == "block") {
allshowcontent[1].style.display = "none";
}
})
} <div>
<div>
<ul>
<li id="showcontent"><h3><a class="pinkshows">text1</a></h3></li>
<li id="showcontent"><h3><a class="redshows">text2</a></h3></li>
<li id="showcontent"><h3><a class="orangeshows">text3</a></h3></li>
<li id="showcontent"><h3><a class="pinkshows">text4</a></h3></li>
<li id="showcontent"><h3><a class="orangeshows">text5</a></h3></li>
</ul>
</div>
<div id="pinkshowscontent" style="display: none; margin-bottom: 20px">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus...
</div>
<div id="redshowscontent" style="display: none; margin-bottom: 20px">
Lorem ipsum dolor sit amet consectetur...
</div>
<div id="orangeshowscontent" style="display: none; margin-bottom: 20px">
Lorem, ipsum dolor sit...
</div>
</div>I want that when I press a text the div with the appropriate id be showed but any other be concealed, with my code “display: none” is being applied in all “lorem…” div’s when a press a second, third… text. So I tried to remove the id of the array using indexOf and after that apply a display of none of all elements of the array but I’m doing something wrong, can anyone help me? please
Answer
Try this way.
var showContents = document.getElementsByClassName("showcontent");
for(var i = 0; i < showContents.length; i++) {
showContents[i].addEventListener("click", function() {
[].forEach.call(document.querySelectorAll('.content'), function (el) {
el.style.display = 'none';
});
var showcontentelement = document.getElementById(event.target.className + "content");
showcontentelement.style.display = "block";
})
}<div>
<div>
<ul>
<li class="showcontent"><h3><a class="pinkshows">text1</a></h3></li>
<li class="showcontent"><h3><a class="redshows">text2</a></h3></li>
<li class="showcontent"><h3><a class="orangeshows">text3</a></h3></li>
<li class="showcontent"><h3><a class="pinkshows">text4</a></h3></li>
<li class="showcontent"><h3><a class="orangeshows">text5</a></h3></li>
</ul>
</div>
<div class="content" id="pinkshowscontent" style="display: none; margin-bottom: 20px">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus...
</div>
<div class="content" id="redshowscontent" style="display: none; margin-bottom: 20px">
Lorem ipsum dolor sit amet consectetur...
</div>
<div class="content" id="orangeshowscontent" style="display: none; margin-bottom: 20px">
Lorem, ipsum dolor sit...
</div>
</div>