Expand/Collapse script expands but does not collapse

[M.L.]

The expand/collapse script I'm using expands a DIV block just fine in
IE, Firefox and Opera but neither can collapse the block back to its
original condition. I'm rusty with JS and would like to know if I'm
missing some basic steps or concepts needed to get it to work as
expected. The steps I've taken regarding CSS, HTML and JS are as
follows:

*****************************
CSS:
... #menuForm {visibility:hidden;display:none;} ...

*****************************
HTML:
....<span onClick="showHide('menuForm')" class="text10">Some text
here</span>...
....
<div id="menuForm">
<form... ><TABLE ...>...</table></form>
</div>

*****************************
JS:
function showHide(obj)
{
var DOC = document.getElementById(obj);
if (DOC.visibility='hidden')
{
DOC.style.visibility='visible';
DOC.style.display='block';
}
else
{
DOC.visibility='hidden';
DOC.style.display='none';
}
}
*****************************

I strategically placed some alerts at the top and bottom of each JS
conditional and found that the visibility value never changes and
remains set to 'hidden' even after the DIV has become visible, and the
display value is always set to 'none'. Therefore, the code never gets to
the *hiding* portion of the script. I'm wondering if the CSS setting is
keeping those values constant. Any assistance on this issue will be
greatly appreciated. Thanks.

 

[Gregor Kofler]

M.L. meinte:

if (DOC.visibility='hidden')
DOC.style.visibility

{
DOC.style.visibility='visible';
DOC.style.display='block';
}
else
{
DOC.visibility='hidden';

DOC.style.visibility


Gregor

 

[Stevo]

function showHide(obj)
{
var DOC = document.getElementById(obj);
if (DOC.visibility='hidden')

Two major problems and one potential problem there. One is that you
should be using DOC.style.visibility. That's enough to stop it working
(as Gregor already pointed out). The other major problem is that you've
only get one = sign. The minor potential problem is that you're not
checking if obj was found and you're leaving yourself open for a JS
error if obj is a non-existent object. Solved:

function showHide(obj)
{
var DOC=document.getElementById(obj);
if(DOC)
{
if(DOC.style.visibility=="hidden")
.....

 

[M.L.]

function showHide(obj)

Two major problems and one potential problem there. One is that you
should be using DOC.style.visibility. That's enough to stop it working
(as Gregor already pointed out). The other major problem is that
you've only get one = sign. The minor potential problem is that
you're not checking if obj was found and you're leaving yourself open
for a JS error if obj is a non-existent object. Solved:

function showHide(obj)
{
var DOC=document.getElementById(obj);
if(DOC)
{
if(DOC.style.visibility=="hidden")
....

I want to profusely thank both Stevo and Gregor Kofler. The two of you
saved me tons of on-going frustration. It turns out I introduced the
mistakes when I made seemingly small changes to the original script. I
have two issues though:

I don't know what to do if the test for the object turns out false.
Since there is only one such object on the page I don't see why the test
is necessary.

After refreshing the page, when I click on the showHide button, nothing
happens. After clicking on it the 2nd time, everything toggles as
expected. It works that way in IE, Firefox and Opera. I'm at a loss for
that behavior, but I think most people will instinctively click the
button a 2nd time to try to make it work.

Those are minor issues and I'm happy with the way things are. Thanks
again.

 

[Stevo]

I don't know what to do if the test for the object turns out false.
Since there is only one such object on the page I don't see why the test
is necessary.

I would just do nothing. That function you're creating is highly useful.
You can be sure that other people in the future might see it and want to
use it. They might call it at the wrong time and their object doesn't
exist (yet). Or you might find that the object you're creating is
created with code that isn't compatible with some fancy new browser down
the line.

I did say it's only a potential problem, and it's just good defensive
programming style to see that if the object didn't exist, then you'd
cause a JS error, and they're a bad idea. So wrap it in a test for
if(DOC) and you remove that risk. You don't have to do anything on an
else. I have similar functions that are asked to do things to objects
and I always assume that I might be being asked to perform on an object
that doesn't exist.

Saying all that though, most of the example code that is posted here
makes that same error. That's why when you surf the web on the same
machine you develop with, and you have debug enabled on IE, you're
constantly bombarded with JS errors. You'd think the big sites like
google would be free of such errors but no such luck. If anything
they're one of the worst offenders.

 

[M.L.]

Post a URL.

I'm not done with the website yet and am testing it offline, but the
code I posted in my original post should provide enough details to test
it on your own. (I included the object test and some recommended
corrections in the JS):

One other thing: When I added alerts for visibility and display just
after the [if (DOC.style.visibility=='hidden')] test,
DOC.style.visibility was = 'hidden' as expected, but DOC.style.display
was = to nothing. I expected it to ='none'.

*****************************
CSS:
#menuForm {visibility:hidden;display:none;}
..text10
{color:black;background:white;font-weight:normal;cursor:hand;cursorointer;border:
1px solid red;padding: 1px 4px 1px 4px;font-family:
Tahoma,Arial,Verdana,Helvetica,sans-serif;}

*****************************
HTML:
....<span onClick="showHide('menuForm')" class="text10">Click
here</span>...
....
<div id="menuForm">
<form... ><table ...>...</table></form>
</div>

*****************************
JS:
function showHide(obj)
{
var DOC = document.getElementById(obj);
if (DOC)
{
if (DOC.style.visibility=='hidden')
{
DOC.style.visibility='visible';
DOC.style.display='block';
}
else
{
DOC.style.visibility='hidden';
DOC.style.display='none';
}
}
}
*****************************

 

[M.L.]

I would just do nothing. That function you're creating is highly
useful.

I didn't create that code. I downloaded it ages ago from a
long-forgotten website.

You can be sure that other people in the future might see it
and want to use it. They might call it at the wrong time and their
object doesn't exist (yet). Or you might find that the object you're
creating is created with code that isn't compatible with some fancy
new browser down the line.

The corrected code is now in the Google archives for those who happen to
peruse this thread.

I did say it's only a potential problem, and it's just good defensive
programming style to see that if the object didn't exist, then you'd
cause a JS error, and they're a bad idea. So wrap it in a test for
if(DOC) and you remove that risk. You don't have to do anything on an
else.

<snip>

 

[M.L.]

I'm not done with the website yet and am testing it offline, but the
code I posted in my original post should provide enough details to
test it on your own. (I included the object test and some recommended
corrections in the JS):

It included a lot of ****** that I wanted to see what you had there.
And, I don't care to make a test page to try to tell you what is wrong
with your script/HTML/CSS.

One other thing: When I added alerts for visibility and display just
after the [if (DOC.style.visibility=='hidden')] test,
DOC.style.visibility was = 'hidden' as expected, but
DOC.style.display was = to nothing. I expected it to ='none'.

In what browser? In the ones I tested, it was blank (which is what I
expected it to be).

I need to make a correction. Both the visibility and display properties
were blank. I got the same results in IE, Firefox and Opera.

if (DOC && DOC.style
&& DOC.style.visibility
&& DOC.style.display)


Simplest solution?

if (DOC.style.visibility != 'visible';


Setting the visibility there and then setting the display property is
almost a perverse idea.

That code was from a javascript website.

I could type out why you get nothing in the alert but my post has
enough information in it for you to figure it out or at least to get
you started searching the archives.

Changing the code to your [if (DOC.style.visibility != 'visible';] test
made the show/hide work perfectly the first time and everytime. And I
can understand why. I still need to do research to figure out why those
values were alerted as blank even though they were set in the CSS. Thank
you so much for solving my final issue. Everything's working great now.

 

[adamraney]

After refreshing the page, when I click on the showHide button,
nothing happens. After clicking on it the 2nd time, everything
toggles as expected. It works that way in IE, Firefox and Opera.

I believe the problem here is that you are setting your visibility and
display properties in either an external CSS file or in your <head>
element. The JavaScript style attribute on elements seems to refer to
inline CSS. So, if you declared your element as:

<div style="display: none; visibility: hidden;"></div>

.... then calling DOC.style.visibility would return 'hidden'. Since you
are not declaring these styles inline initially, the initial value
returned is blank as they have not been set inline. After your first
execution, they are being set inline via JavaScript, and the second
execution finds the new settings correctly.

Either declare these styles inline, or declare them via JavaScript
before the script is called (perhaps in the window.onload function),
or perhaps the best idea is to not only check that visibility ==
"hidden" but also check for the possibility of visibility being a
blank value (I'm not sure, but I think that would be visibility == "").

 

[M.L.]

I believe the problem here is that you are setting your visibility and
display properties in either an external CSS file or in your <head>
element. The JavaScript style attribute on elements seems to refer to
inline CSS. So, if you declared your element as:

<div style="display: none; visibility: hidden;"></div>

... then calling DOC.style.visibility would return 'hidden'. Since you
are not declaring these styles inline initially, the initial value
returned is blank as they have not been set inline. After your first
execution, they are being set inline via JavaScript, and the second
execution finds the new settings correctly.

Either declare these styles inline, or declare them via JavaScript
before the script is called (perhaps in the window.onload function),
or perhaps the best idea is to not only check that visibility ==
"hidden" but also check for the possibility of visibility being a
blank value (I'm not sure, but I think that would be visibility ==
"").

Thanks you for explaining why my CSS visibility and display properties
showed as blanks even though I had set them in an external CSS (I
generally avoid inline styles because they create more of a maintenance
problem than embedded or external declarations). A previous poster
explained why my initial IF statement didn't work in that situation. He
recommended that I change the conditional from:

if (DOC.style.visibility == 'hidden')
to
if (DOC.style.visibility != 'visible')

That allowed the code to set the visibility as expected whether prior
visibility was blank or 'hidden'. It was sloppy coding to assume that
the visibility property could only be 'visible' or 'hidden'. I again
want to thank everyone for their prompt and helpful contributions to
this thread.