title: how do I make only one element visible using the same function
body: <p>I am trying to set up a frequently asked questions page. I could assign each question so a seperate function and store the answer in my HTML and display as hidden, then the event will trigger the function to make the hidden answer appear. I am trying to find a way to use the same functions to achieve this. This is what i have so far with example text included. What is happeneing at the moment is if i click on the first question , all the answer appear at once, i obvously dont want this and want one answer to appear at a time, thanks</p>
  <pre><code>     &lt;script&gt;
   
        function displayAnswer () { 
  
  var getParent = document.getElementsByClassName(&quot;questions&quot;);
  var getParentNode = getParent[0];
  var child = getParentNode.childNodes[3];
  child.style.visibility = &quot;visible&quot;;
  
  var getParent = document.getElementsByClassName(&quot;questions&quot;);
  var getParentNode = getParent[1];
  var child = getParentNode.childNodes[3];
  child.style.visibility = &quot;visible&quot;;
  
  var getParent = document.getElementsByClassName(&quot;questions&quot;);
  var getParentNode = getParent[2];
  var child = getParentNode.childNodes[3];
  child.style.visibility = &quot;visible&quot;;
  }
  </code></pre>
    
    
          
           
    
           
    
          
           What happens if i want to buy an items </p>
            this cost 600 pounds but we offer dis counts </p>
           
    
           
            What happens if i want to buy an items </p>
            this cost 600 pounds but we offer dis counts </p>
           
    
    
           
            What happens if i want to buy an items </p>
            this cost 600 pounds but we offer dis counts </p>