Change <div> visibility

perleo · #1 (**permalink**) 08-16-05, 01:12 PM

How do I get JS to change a <div> 's visibility,

I have:

<div id="main" style="visibility: show">

but I want a link like this

<a href="#" onclick="switchMain()">Change</a>

and clicking on that link will hide or show the layer.

I tried

Code:

 function getStyle()
   {
      var temp = document.getElementById("main").style.visibility;
  
      return temp;
   }

 function switchMain()
  {

      var current = getStyle();

      if( current == "show" )
       {
         document.getElementById("main").style.visibility = "hidden";
       }
       else
       {
         document.getElementById("main").style.visibility = "show";
       }
  }

but it doesnt work ? ?

TwoD · #2 (**permalink**) 08-16-05, 02:13 PM

It should be visible instead of show.

perleo · #3 (**permalink**) 08-16-05, 02:55 PM

doesnt make a difference

TwoD · #4 (**permalink**) 08-16-05, 05:09 PM

This works for me:

Code:

<html>

<head>
<script>
function getStyle()
   {
      var temp = document.getElementById("main").style.visibility;
  
      return temp;
   }

 function switchMain()
  {

      var current = getStyle();

      if( current == "visible" )
       {
         document.getElementById("main").style.visibility = "hidden";
       }
       else
       {
         document.getElementById("main").style.visibility = "visible";
       }
  }

</script>
</head>

<body>
<div id="main" style="visibility: visible">Hello</div>

<a href="#" onclick="switchMain()">Change</a>

</body>

</html>

perleo · #5 (**permalink**) 08-17-05, 05:19 AM

yeah, got it thanks, I did some browser checking before hand..

Change <div> visibility

Internet Services

Website Development

Tech Hardware