Hiding text after clicking on something different

Question

My goal here is to have the riddles in my page to be shown one at a time. My instructor has shown us a way using JavaScript variables. in my HTML I have two riddles shown as an example:

<h5>Question 1</h5>    
<p onClick="revealAnswer('answer1','When it is turned into the teacher', 0)">When is homework not homework?</p><br/>
<span id="answer1" class="answers"></span><br/>
<hr>
<h5>Question 2</h5>
<p onClick="revealAnswer('answer2','An Umbrella', 1)">What goes up when rain comes down?</p><br/>
<span id="answer2" class="answers"></span><br/>
<hr>

in an external JavaScript, I have this code to expose the answers:

var isVisible = new Array();
isVisible[0] = false;
isVisible[1] = false;


function revealAnswer(answerId, answer, indexNum){
    if(isVisible[indexNum]==false){
        document.getElementById(answerId).innerHTML = answer;
        isVisible[indexNum]=true;
        console.log(answerId);
    }
    else{
        document.getElementById(answerId).innerHTML = "";
        isVisible[indexNum]=false;
    }

My goal is when you click on "question 1", it shows you the answer, but when you click on "question 2" the answer to "question 1" goes away, and shows you the answer to "question 2". I am entirely new to JavaScript, but my best guess is to either add a new function, add an additional "if" or "else" to the existing "revealAnswer" function. What are your best recommendations?

Answer 1

I know two ways to do this. One would be to put invisible radiobuttons on the page and to write the questions in their labels, but that's quite a peculiar hack. Let's do something simpler.

Instead of storing the state of all answers, you could just store which one is visible. Then, when you click on a question, the currently visible answer is hidden and the new answer is shown.

var visibleAnswer = null;

function revealAnswer(answerId, answer){
    var answerElement = document.getElementById(answerId);
    
    if(visibleAnswer) {
        visibleAnswer.innerHTML = "";
    }
    
    if(!visibleAnswer || visibleAnswer.id !== answerElement.id) {
            answerElement.innerHTML = answer;
            visibleAnswer = answerElement;
    } else {
        answerElement.innerHTML = "";
        visibleAnswer = null;
    }
}

<h5>Question 1</h5>    
<p onClick="revealAnswer('answer1','When it is turned into the teacher')">When is homework not homework?</p><br/>
<span id="answer1" class="answers"></span><br/>
<hr>
<h5>Question 2</h5>
<p onClick="revealAnswer('answer2','An Umbrella')">What goes up when rain comes down?</p><br/>
<span id="answer2" class="answers"></span><br/>
<hr>

Answer 2

Here's a different approach. It toggles the visibility of the current answer, and then it hides all the other answers.

This simplifies the HTML, because you don't need any IDs. nextElementSibling grabs the answer that goes with the clicked question.

It also simplifies the JavaScript, because you don't need a global array to hold the visibility of each answer.

function revealAnswer(p) {
  var ans= p.nextElementSibling,
      all= document.querySelectorAll('.answers');
  ans.classList.toggle('visible');
  for(var i = 0 ; i < all.length ; i++) {
    if(all[i] !== ans) all[i].classList.remove('visible');
  }
}

.answers {
  display: none;
}

.visible {
  display: block;
}

<h5>Question 1</h5>    
<p onClick="revealAnswer(this)">When is homework not homework?</p>
<p class="answers">When it is turned into the teacher</p>
<hr>
<h5>Question 2</h5>
<p onClick="revealAnswer(this)">What goes up when rain comes down?</p>
<p class="answers">An Umbrella</p>
<hr>

Answer 3

Jquery would make your life much easier. Go take a look at this : http://www.w3schools.com/JQuery/jquery_hide_show.asp

To hide or show elements using Jquery you only have to do is give an id to your HTML elements as follows : <button id="hide">ButtonHide</button>

And then call an event on that button in JQuery :

$(document).ready(function(){
    $("#hide").click(function(){
        $("#hide").hide();
    });
});

The #is a direct reference to the ID in your html making it easy to access it from your jquery.

If you wanted to hide the answer using jquery all you would have to do is :

1. Give and ID to it:

   <p id="Question1Answer">blablabla</p> <p id="Question2">blablabla</p>

2. Set an event on question 2

   $(document).ready(function(){
       $("#Question2").click(function(){
           $("#Question1Answer").hide();
       });
   });
   

To make it clearer how to inlcude this into your code go check the link I posted at the top of the answer

Go check on the following link how to include Jquery : http://www.w3schools.com/jquery/jquery_get_started.asp

Answer 4

 var isVisible = new Array();
    isVisible[0] = false;
    isVisible[1] = false;


function revealAnswer(answerId, answer, indexNum){
    if(isVisible[indexNum]==false){
	var spanAnswer = document.querySelectorAll(".answers");
		for(i=0;i < spanAnswer.length ; i++){
			spanAnswer[i].innerHTML = '';
                        isVisible[i] = false;
		}
    document.getElementById(answerId).innerHTML = answer;
    isVisible[indexNum]=true;
    console.log(answerId);
    }
    else{
    document.getElementById(answerId).innerHTML = "";
    isVisible[indexNum]=false;
    }
}

<h5>Question 1</h5>    
    <p onClick="revealAnswer('answer1','When it is turned into the teacher', 0)">When is homework not homework?</p><br/>
    <span id="answer1" class="answers"></span><br/>
    <hr>
    <h5>Question 2</h5>
    <p onClick="revealAnswer('answer2','An Umbrella', 1)">What goes up when rain comes down?</p><br/>
    <span id="answer2" class="answers"></span><br/>
    <hr>

Here you go

document.querySelectorAll will not work in IE

here is the traditional code which will work in IE as well

function revealAnswer(answerId, answer, indexNum){
    if(isVisible[indexNum]==false){
    var spanAnswer = document.getElementsByTagName("span");
    for(i=0;i < spanAnswer.length ; i++){
      if(spanAnswer[i].id == "answer"+(i+1)){
      spanAnswer[i].innerHTML = '';
      }
    }
    document.getElementById(answerId).innerHTML = answer;
    isVisible[indexNum]=true;
    console.log(answerId);
    }
    else{
    document.getElementById(answerId).innerHTML = "";
    isVisible[indexNum]=false;
    }
}