Show a division on button click and hide other divisions

Question

i've got 20/30 divs. If i click on a button the onClick will tell the function to show welcomeDiv1 but it should also hide welcomeDiv2/3/4/5/6 etc..

Same with showing welcomeDiv7, then it needs to hide welcomeDiv1/2/3/4/5/6/8/9 etc..

Script: 
        function showDiv1() {
   document.getElementById('welcomeDiv').style.display = "none";
   document.getElementById('welcomeDiv1').style.display = "block";
}

^^ Now it actually should hide all divs named welcomeDiv.. expect welcomeDiv1

First code

    <div class="websites">
        <div id="welcomeDiv"  style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
        <div id="welcomeDiv1"  style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
    </div>

And second code

        <a title='Project 1'class="text1" onclick="showDiv()">Project 1</a>
        <script>
        function showDiv() {
   document.getElementById('welcomeDiv1').style.display = "none";
   document.getElementById('welcomeDiv').style.display = "block";
}
        </script>
        <a title='Project 2' class="text1" onclick="showDiv1()">Project 2</a>
        <script>
        function showDiv1() {
   document.getElementById('welcomeDiv').style.display = "none";
   document.getElementById('welcomeDiv1').style.display = "block";
}
        </script>

Answer 1

If you are trying without a loop as you have n set of a and div(loop through more elements affects performance), then I would suggest to go with adding show class to the showing div

function showDiv(t) {
  if (document.querySelector('.show'))
    document.querySelector('.show').className = "welcome";
  document.getElementById(t.dataset.target).className = "welcome show";
}

.welcome {
  display: none;
}
.show {
  display: block;
}
.button {
  background-color: #0095ff;
  border-color: #07c;
  cursor:pointer;
  padding:0px 20px;
}

<button type="button" class="button" data-target="welcome1" onclick="showDiv(this)">1</button>
<button type="button" class="button" data-target="welcome2" onclick="showDiv(this)">2</button>
<button type="button" class="button" data-target="welcome3" onclick="showDiv(this)">3</button>

<br/>

<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>

Using radio button

If you are trying without a loop as you have n set of a and div, then I would suggest to go with a hidden radio button method

function showDiv(t) {
  document.getElementById(t.rel).click();
}

.answer_list {
  display: none;
}

.webrad {
  display: none;
}

.webrad:checked+.answer_list {
  display: block;
}

.text1 {
  background-color: #0095ff;
  border-color: #07c;
  cursor:pointer;
  padding:0px 20px;
}

<div class="websites">
  <a title='Project 1' rel="welcomeRadio" class="text1" onclick="showDiv(this)">Project 1</a>
  <a title='Project 2' rel="welcomeRadio1" class="text1" onclick="showDiv(this)">Project 2</a>
</div>
<div class="websites">
  <input id="welcomeRadio" class="webrad" type="radio" name="websites" />
  <div id="welcomeDiv" class="answer_list">cv.pdf<object data="cv/cv.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
  
</object></div>
  <input id="welcomeRadio1" class="webrad" type="radio" name="websites" />
  <div id="welcomeDiv1" class="answer_list">6.pdf<object data="cv/6.pdf" type="application/pdf" width="100%" height="100px;" class="cv">
  
</object></div>
</div>

Answer 2

Alright i fixed it my self, with some help of the lovely internet

    function MyFunction(divName){

    //hidden val
    var hiddenVal = document.getElementById("tempDivName"); 

    //hide old
    if(hiddenVal.Value != undefined){
        var oldDiv = document.getElementById(hiddenVal.Value); 
        oldDiv.style.display = 'none'; 
    }

    //show div
        var tempDiv = document.getElementById(divName); 
        tempDiv.style.display = 'block';              

    //save div ID
        hiddenVal.Value = document.getElementById(divName).getAttribute("id");

    }

And HTML 1:

<input id="tempDivName" type="hidden" />
    <a title='Project 1'class="text1" OnClick="MyFunction('myDiv1');">Project 1</a>

    <a title='Project 2' class="text1" OnClick="MyFunction('myDiv2');">Project 2</a>

    <a title='Project 3' class="text1" OnClick="MyFunction('myDiv3');">Project 3</a>

And html 2:

        <div id="myDiv1"  style="display:none;" class="answer_list" ><object data="cv/cv.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
        <div id="myDiv2"  style="display:none;" class="answer_list" ><object data="cv/6.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>
        <div id="myDiv3"  style="display:none;" class="answer_list" ><object data="cv/Practiced.pdf" type="application/pdf" width="100%" height="1100px;" class="cv">
</object></div>

Answer 3

A simple and easy solution for you:

<a title='Project 1'class="text1" onclick="showDiv('welcomeDiv1')">Project 1</a>
<a title='Project 2' class="text1" onclick="showDiv('welcomeDiv2')">Project 2</a>

<div class="websites">
        <div id="welcomeDiv1"  style="display:none;" class="answer_list" >1</div>
        <div id="welcomeDiv2"  style="display:none;" class="answer_list" >2</div>
</div>



<script>
    function showDiv(div_id) {
          var divsToHide = document.getElementsByClassName("answer_list"); //divsToHide is an array
            for(var i = 0; i < divsToHide.length; i++){
                    divsToHide[i].style.display = "none"; // hide your divisions
            }

         document.getElementById(div_id).style.display = "block"; //show your division
    }
</script>

Answer 4

Also give each div a class WelcomeDiv. Then, you just hide the entire WelcomeDiv class and show the one you want. For example:

divs = document.getElementsByClassName("WelcomeDiv");
for (i = 1; i < divs.length; i++) {
    divs[i].style.display = "none";
}
document.getElementById("WelcomeDiv1").style.display = "block";

Answer 5

You must use for loops, for example

function showDiv(div){
    for (i = 0; i => 100; i++){
       var x = document.getElementById('exampleDiv-' + i);
       x.style.display = 'none';
       //You can also use visibility to get animations work.
    }
    var y = document.getElementById('exampleDiv-' + i);
    y.style.display = 'block';
}

Answer 6

You can refactor your HTML/Script. Persist target with the element, which can be later retrieved using Element.dataset property.

Learn to use addEventListener() to attach event handler.

Here is a sample snippet:

document.querySelectorAll('.button').forEach(function(element) {
  element.addEventListener('click', function() {
    var _this = this;
    document.querySelectorAll('.welcome').forEach(function(welcome) {
      if (_this.dataset.target == welcome.id) {
        welcome.style.display = "block";
      } else {
        welcome.style.display = "none";
      }
    })
  });
});

.welcome {
  display: none
}

<button type="button" class="button" data-target="welcome1">1</button>
<button type="button" class="button" data-target="welcome2">2</button>
<button type="button" class="button" data-target="welcome3">3</button>

<br/>

<div class="welcome" id="welcome1">welcome1</div>
<div class="welcome" id="welcome2">welcome2</div>
<div class="welcome" id="welcome3">welcome3</div>