When I click a button, the corresponding answer show appear and the other answers should not be displayed

user_1096892 0
Viewed 1149

I have ten of these buttons and answers with the only difference between each one being the answer:

Example:

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1D, 2C</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1A, 2D</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction()">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1B, 2B</div>
</div>

Now what I want is that if the user clicks a button, the relevant answer will be revealed. Currently, it is doing this but there is a catch, it displays all answers which is not what I want. I want it so that dependent on which button I click, it only reveals the answer for that one and the other answers are not displayed.

How can the code be manipulated to incorporate what I am guessing is some soft of loop to retrieve the button that has been clicked and display the corresponding answer and hide all the other answers?

var answers = document.getElementsByClassName("showme");
  var revealAnswers = document.getElementsByClassName("answerbtn");

function revealAnswersFunction() {

  if (answers.style.display === "none") {
    answers.style.display = "inline-block";
  } else {
    answers.style.display = "none";
  }
}
html jquery javascript
3 Answers

function revealAnswersFunction(e) {

var all =document.getElementsByClassName('showme');
for(let i=0;i<all.length;i++){
   all[i].style.display='none';
   }

var div = e.nextSibling.nextElementSibling;
div.style.display = "inline-block";

  
}
<div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1D, 2C</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1A, 2D</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(this)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1B, 2B</div>
</div>

user_43989660

a simple solution would be to use the index in the function: 

<div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(0)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1D, 2C</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(1)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1A, 2D</div>
</div>

  <div class="showhim"> 
        <button class="answerbtn" onclick="revealAnswersFunction(2)">Click/Tap To Reveal Answers:</button>
    <div class="showme" style="display:none">1B, 2B</div>
</div>

function revealAnswersFunction(index) {

  if (answers[index].style.display === "none") {
    answers[index].style.display = "inline-block";
  } else {
    answers[index].style.display = "none";
  }
}

in the HTML, I added an index number to onclick="revealAnswersFunction(0)" . Then used that index in the function for the answer you want to display.

For future reference when you call document.getElementsByClassName() it returns an array, so you will need the index of the array item you want to modify.

A much cleaner solution would be to use Event Listeners to add an onclick event to the buttons in the javascript.

user_71138390

First hide the all answers using hide() method and then change the display properties of the current answer.

function revealAnswersFunction(e) {
  $('.showme').hide();
  e.target.nextElementSibling.style.display = 'inline-block';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="showhim"> 
 <button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>
  <div class="showme" style="display:none">1D, 2C</div>
</div>
    
<div class="showhim"> 
 <button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>
 <div class="showme" style="display:none">1A, 2D</div>
</div>
    
 <div class="showhim"> 
 <button class="answerbtn" onclick="revealAnswersFunction(event)">Click/Tap To Reveal Answers:</button>
  <div class="showme" style="display:none">1B, 2B</div>
 </div>

user_42469860
Related