Javascript：切换 div 的可见性

Question

I'm trying to make a div visible/invisible using java script. I have a function that is supposed to change the visibility to 'none' if the div is visible and to 'visible' if the div is none. However it doesn't seem to be working. Here is the code:

<script>
      function toggleTools()
      {
          var element = document.getElementById('divTools');
          if(element.style.visibility=='visible')
          {
              element.style.visibility='hidden';
          }
          else
          {
              element.style.visibility='visible';
          }
      }
</script>

Answer 1

Go with

document.getElementById('divTools').style.display = 'block';
document.getElementById('divTools').style.display = 'none';

Answer 2

Try this way:

<script>
      function toggleTools()
      {
          var element = document.getElementById('divTools');
          if(element.style.display!='none')
          {
              element.style.display='none';
          }
          else
          {
              element.style.display='block';
          }
      }
    </script>

But you can use JQuery.

$('#divTools').toggle();

Answer 3

I Tried Your Code and Its Working For me. Please Find Below Code. Set Visibility for the Element initially Otherwise its not working at the beginning.

 <script>
          function toggleTools()
          {
              var element = document.getElementById('divTools');
              if(element.style.visibility=='visible')
              {
                  element.style.visibility='hidden';
              }
              else
              {
                  element.style.visibility='visible';
              }

          }
        </script>

    <div id="divTools" style="visibility:visible">
    <p>Some Text</p>
    </div>
    <input type="button" onclick="toggleTools()" value="click" />

Answer 4

The last thing don't work it's the first time whom charge the page. I check if visibility == '' and this works.

function toggleTools()
      {
          var element = document.getElementById('divTools');
          if(element.style.visibility=='visible' || element.style.visibility=='')
          {
              element.style.visibility='hidden';
          }
          else
          {
              element.style.visibility='visible';
          }
      }

live demo: http://jsfiddle.net/Magicianred/9vTeR/1/

Enjoy your code.

Answer 5

The code works, provided you set the visibility initially:

via CSS:

#divTools {
    visibility:hidden;
}

jsFiddle example

Or via JavaScript:

document.getElementById('divTools').style.visibility='hidden';

jsFiddle example