How can i make only one choice available from 3?

GGalusca Published at Dev

GGalusca

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>

lucumt

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2022-10-21

Comments

0 comments

Next: Concatenating columns in pandas dataframe

TOP Ranking

Article

How can i make only one choice available from 3?

How can i make only one choice available from 3?

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

pump.io port in URL

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

How to import an asset in swift using Bundle.main.path() in a react-native native module

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

3D Touch Peek Swipe Like Mail

BigQuery - concatenate ignoring NULL

How to how increase/decrease compared to adjacent cell

Make a B+ Tree concurrent thread safe

Emulator wrong screen resolution in Android Studio 1.3

Can a 32-bit antivirus program protect you from 64-bit threats

Svchost high CPU from Microsoft.BingWeather app errors

Double spacing in rmarkdown pdf

Unable to use switch toggle for dark mode in material-ui

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

Google Chrome Translate Page Does Not Work

How to fix "pickle_module.load(f, **pickle_load_args) _pickle.UnpicklingError: invalid load key, '<'" using YOLOv3?

Using Response.Redirect with Friendly URLS in ASP.NET

Bootstrap 5 Static Modal Still Closes when I Click Outside

SSIS setting column with data in Script Component