Javascript show and hide blocks

Question

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

IDs **must** be unique. An ID that isn't unique doesn't identify anything, so your script will fail. — isherwood, Mar 17 '21 at 15:53
A better approach might be to refer to target elements by index. You could also switch to a common class. — isherwood, Mar 17 '21 at 15:55
For reference, see [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — showdev, Mar 18 '21 at 04:42

score 0 · Accepted Answer · answered Mar 17 '21 at 16:19

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>

What was the problem and how did you solve it? – showdev Mar 18 '21 at 04:43 — showdev, Mar 18 '21 at 04:43

score 0 · Answer 2 · answered Mar 17 '21 at 16:42

var atags = document.querySelectorAll("li a");

atags.forEach(addClickListener)
function addClickListener(atag){
   let content = 'content'  
  
   atag.addEventListener("click", function() {
   
   lorems = document.getElementsByClassName('lorem')
   for(let i = 0; i< lorems.length;i++){        
        lorems[i].style.display='none';   
   }   
   
   let myClass = atag.className  
   let show = document.getElementById(myClass + content)   
   show.style.display='block'   
})}

<div>
    <div>
      <ul>
        <li><h3><a class="pinkshows">text1</a></h3></li>
        <li><h3><a class="redshows">text2</a></h3></li>
        <li><h3><a class="orangeshows">text3</a></h3></li>
        <li><h3><a class="pinkshows">text4</a></h3></li>
        <li><h3><a class="orangeshows">text5</a></h3></li>
      </ul>
    </div>
    <div id="pinkshowscontent"  class='lorem' style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit amet consectetur adipisicing elit. Accusamus...
    </div>
    <div id="redshowscontent" class='lorem' style="display: none; margin-bottom: 20px">
            Lorem ipsum dolor sit amet consectetur...
    </div>
    <div id="orangeshowscontent" class='lorem' style="display: none; margin-bottom: 20px">
       Lorem, ipsum dolor sit...
    </div>
  </div>

What was the problem and how did you solve it? – showdev Mar 18 '21 at 04:43 — showdev, Mar 18 '21 at 04:43

Javascript show and hide blocks

2 Answers2