Visibility control question from a COMPLETE noob.

mOrloff · 08-16-2010, 09:45 PM

Every year or two, I want to do something SIMPLE via JS, and each time it's like i've never been there before

I simply want a button to show/hide something on click, and I THINK I'm close, but it's not quite working.

Here's what I'm toying with.

Code:

<html>
  <head>
    <script type="text/javascript">
      function showHide("idName") {
        if(document.getElementById("idName").style.visibility=="hidden") {
          document.getElementById("idName").style.visibility=="visible";
        }
        else {
          document.getElementById("idName").style.visibility=="hidden";
        }
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="showHide(1)">Click Me!</button>
    <div id="1" "style=visibility:hidden;"><p>this is the stuff.</p></div>
  </body>
</html>

How do I get the button to make that div (in)visible??
~Mo

Old Pedant · 08-16-2010, 09:56 PM

Code:

    <div id="D1" style="visibility:hidden;"><p>this is the stuff.</p></div>

Not a JS problem. An HTML problem. And don't use id's that start with digits.

And then:

Code:

<html>
  <head>
    <script type="text/javascript">
      function showHide(id) {
        var div = document.getElementById(id);
        div.style.visibility = ( div.style.visiblity == "hidden") ? "visible" : "hidden";
      }
    </script>
  </head>
  <body>
    <button type="button" onclick="showHide('D1')">Click Me!</button>
    <div id="D1" style="visibility:hidden;"><p>this is the stuff.</p></div>
  </body>
</html>

Philip M · 08-16-2010, 09:56 PM

Do please read the posting guidelines regarding silly thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful.

<div id="1" An id must start with a letter, not a number.

"style=visibility:hidden;"> should be style="visibility:hidden">

It is your responsibility to die() if necessary….. - PHP Manual

mOrloff · 08-16-2010, 09:59 PM

Thanks to both of you.

mOrloff · 08-16-2010, 10:05 PM

Pedant, is that tested code?
I'm still coming up shy of the mark, even with a direct copy/paste of this code.

Old Pedant · 08-16-2010, 10:14 PM

Wasn't tested. Just fixed your obvious errors.

And then made a typo:

Code:

        div.style.visibility = ( div.style.visiblity == "hidden") ? "visible" : "hidden";

put the missing "i" in there after the "b" and it will work.

mOrloff · 08-16-2010, 10:44 PM

And ... for his next trick, he will walk and chew gum at the same time !!!

Philip M · 08-17-2010, 08:13 AM

Quote:

Originally Posted by mOrloff

And ... for his next trick, he will walk and chew gum at the same time !!!

Nah, too difficult for an American who is below the rank of President.

Old Pedant · 08-17-2010, 08:15 PM

Philip: You don't seem to understand "rank" as applied to Americans: *EVERY* American thinks that they rank higher than President. They clearly think they know better than the President how the country should be run. So the President is at the bottom, with Senator just barely above him, and so on. <grin style="sad, but true" />

mOrloff · 08-17-2010, 11:34 PM

PHP Code:


			
if($factAboutAmericans==TRUE && $sad==TRUE){

    echo 'I probably shouldn\'t be laughing at this.';

}else{

    echo 'Denial isn\'t only a river in Egypt ;-)';

}