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

Answer 1

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>