title: javascript function onclick must click twice -_- why so?
body: <p>I have a page(it is an faq page for a web site) such that when a user click on a div (e.g. #question01) there's a new div that appears below it. Really easy but the thing is that with my function, when you click the first time, nothing appears, then another click and there you go. My #faqAnswer01 has now a "unhide" class which is set to display:block; (.hide = display:none;) </p>
  
  <p>So here are my two question : </p>
  
  <p>1- Why do I have to click twice for my function to get executed?</p>
  
  <p>2- How can I fix my code so that it works after just one click?</p>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;div id="faqContainer"&gt;
  
     &lt;div id="question01" onclick="showAnswer('faqAnswer01','imgArrow01');"&gt;Here's a question?&lt;img src="public/images/gt.png" class="imgArrow" id="imgArrow01"&gt;&lt;/div&gt;
          &lt;div id="faqAnswer01" class="faqAnswerDiv hide"&gt;bla bla bla&lt;/div&gt;
  
     &lt;div id="question02" onclick="showAnswer('faqAnswer02','imgArrow02');"&gt;Another question here? &lt;img src="public/images/gt.png" class="imgArrow" id="imgArrow02"&gt;&lt;/div&gt;
      &lt;div id="faqAnswer02" class="faqAnswerDiv hide"&gt;answer here.&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>My function: </p>
  
  <pre><code>function showAnswer(idAnswer , idImg) {
      if (document.getElementById(idImg).src == "http://www.cbifinance.org/public/images/gt.png") {
          document.getElementById(idImg).src = "http://www.cbifinance.org/public/images/gt90.png";
          document.getElementById(idAnswer).className = 'faqAnswerDiv unhide';
      } else {
          document.getElementById(idImg).src = "http://www.cbifinance.org/public/images/gt.png";
          document.getElementById(idAnswer).className = 'faqAnswerDiv hide';
      }
  }
  </code></pre>