How can i make only one choice available from 3?

Issue

How can i disable other spans when i click on the button to show one span as a pop up? i want to make only one choice available but i don't know how to do it. If i select one of the 3 options i don't whant to be able to select another one, i want to make the other ones unavailable

I know it's kind of useless but i really need this for a project of mine, can anyone please help me with this?

function junior() {
  var junior = document.getElementById("myjunior");
  junior.classList.toggle("show");
}

 function adult() {
  var adult = document.getElementById("myadult");
  adult.classList.toggle("show"); 
}

 function senior() {
  var senior = document.getElementById("mysenior");
  senior.classList.toggle("show"); 
}

.junior  {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .adult {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .senior {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.junior .juniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .adult .adulttext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .senior .seniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.junior .juniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.adult .adulttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.senior .seniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.junior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .adult .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .senior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

<h1>&nbsp;</h1>  
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"> 
<div class="junior" onclick="junior()">JUNIOR
  <span class="juniortext" id="myjunior" >A Simple junior Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div class="adult" onclick="adult()" >ADULT
  <span class="adulttext" id="myadult" >A Simple adult Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div class="senior" style="text-align: left;">
  <div class="senior" onclick="senior()" >SENIOR
  <span class="seniortext" id="mysenior" >A Simple senior Popup!</span>
</div>
  </div>
</td>
</tr>
</tbody>
</table>

Solution

You can use an extra variable to store the current element id,and if other button are click,we can check the id is the same or not,if not then prevent it from shown.

BTW: you had better use one function instead of 3 similar functions

let clickedId = null
function clickTest(id) {
  if(clickedId){
    if(id!=clickedId){
      return null
    }else{
      clickedId = null
    }
  }else{
    clickedId = id
  }
  var senior = document.getElementById(id);
  senior.classList.toggle("show"); 
}

.junior  {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .adult {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
   .senior {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.junior .juniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .adult .adulttext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}
  .senior .seniortext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

.junior .juniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.adult .adulttext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.senior .seniortext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.junior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .adult .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
 .senior .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

<h1>&nbsp;</h1>  
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;"> 
<div class="junior" onclick="clickTest('myjunior')">JUNIOR
  <span class="juniortext" id="myjunior" >A Simple junior Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div class="adult" onclick="clickTest('myadult')" >ADULT
  <span class="adulttext" id="myadult" >A Simple adult Popup!</span>
</div>
  </td>
<td style="width: 33.3333%;"> 
<div class="senior" style="text-align: left;">
  <div class="senior" onclick="clickTest('mysenior')" >SENIOR
  <span class="seniortext" id="mysenior" >A Simple senior Popup!</span>
</div>
  </div>
</td>
</tr>
</tbody>
</table>

Answered By - lucumt