"First Click" of Button does not hide div

Question

Below code works, but the onclick only works with the function after the second click of the button. Why and what do I need to do for the button to hide the text area on the first click?

My javascript:

function hideShow() {                                         
   var e = document.getElementById('divHR');
   if(e.style.display == 'block')
       e.style.display = 'none';
   else
       e.style.display = 'block';

 }

html

<button id="btnHideShow" onclick="hideShow();">
  <img src="Images/arrow1.bmp" alt="Right Arrow icon" style="width:13px; 
       height:13px; border:0px;" /> 
        Hide or show Human Resources  Information 
</button>
<div id="divHR" class="showHRInfo">
  <h3 id="h3Inline">About Windsurf Human Resource (HR) division </h3>
  <p id="pWindSurfHR" > Windsurf values and respects its employees very highly.  
         Should you have any problem, questions or concerns please
         contact our Human Resource  division.  They are always at your service. 
  </p>
</div>

http://stackoverflow.com/questions/2880957/detect-inline-block-type-of-a-dom-element — epascarello, Nov 21 '14 at 18:30
console.log will answer if you know where to look for logs in browsers. Install firebug on firefox and then check it using F12 key. — Akshay Khandelwal, Nov 21 '14 at 18:32

Muhammet Demir · Accepted Answer · 2014-11-21T19:14:46.780

2

it should work,

 function hideShow() {                                         
       var e = document.getElementById('divHR');
       if(e.style.display != 'none')
           e.style.display = 'none';
       else
           e.style.display = 'block';

     }

Your div style display property might not set 'block'. If so, thus your code set block your display property.

edited Nov 21 '14 at 19:14

answered Nov 21 '14 at 19:05

Muhammet Demir

1,995
5
21
42

"First Click" of Button does not hide div

1 Answers1