title: Javascript onclick needs 2 clicks
body: <p>Each div is shown only after 2 clicks at the start.After 2 initial clicks on each div, each div showhide works with just 1 click. Javascript and html </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showhide() {
    var div = document.getElementsByClassName('search_form')[0];
    if (div.style.display == "none") {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
  
  function showhide2() {
    var div = document.getElementsByClassName('login')[0];
    if (div.style.display == "none") {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
  
  function showhide3() {
    var div = document.getElementsByClassName('carrello')[0];
    if (div.style.display == "none") {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.search_form {
    display: none;
    float: right;
  }
  
  .login {
    display: none;
    float: right;
  }
  
  .carrello {
    display: none;
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="login-carrello"&gt;
    &lt;img src="img.png" onClick="showhide();" onmouseover="this.src='img.png'" onmouseout="this.src='gg.png'" width="50px" height="50px"&gt; &amp;nbsp &amp;nbsp
    &lt;img src="img.png" onClick="showhide2()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px"&gt;
    &lt;img src="imgt.png" onClick="showhide3()" onmouseover="this.src='img.png'" onmouseout="this.src='img.png'" width="50px" height="50px"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>are both in a single PHP page.Thanks in advance.</p>