Expand/Collapse script expands but does not collapse

Discussion in 'Javascript' started by M.L., Aug 28, 2007.

  1. M.L.

    M.L. Guest

    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.
     
    M.L., Aug 28, 2007
    #1
    1. Advertising

  2. 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


    --
    http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
    http://www.licht-blick.at ::: Forum für Multivisionsvorträge
    http://www.image2d.com ::: Bildagentur für den alpinen Raum
     
    Gregor Kofler, Aug 28, 2007
    #2
    1. Advertising

  3. M.L.

    Stevo Guest

    M.L. wrote:
    > 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")
    .....
     
    Stevo, Aug 28, 2007
    #3
  4. M.L.

    M.L. Guest

    >> 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")
    > ....


    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.
     
    M.L., Aug 29, 2007
    #4
  5. M.L.

    Stevo Guest

    M.L. wrote:
    >>> function showHide(obj)

    >> ....

    > 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.
     
    Stevo, Aug 29, 2007
    #5
  6. M.L.

    M.L. Guest

    <snip>
    >> 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.

    >
    > 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;cursor:pointer;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., Aug 29, 2007
    #6
  7. M.L.

    M.L. Guest

    <snip>
    >> 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.


    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., Aug 29, 2007
    #7
  8. M.L.

    M.L. Guest

    >> <snip>
    >>>> 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.
    >>>> 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):

    >
    > 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.

    > <snip>
    >
    >> *****************************
    >> JS:
    >> function showHide(obj)
    >> {
    >> var DOC = document.getElementById(obj);
    >> if (DOC)

    >
    > if (DOC && DOC.style
    > && DOC.style.visibility
    > && DOC.style.display)
    >
    >> {
    >> if (DOC.style.visibility=='hidden')

    >
    > Simplest solution?
    >
    > if (DOC.style.visibility != 'visible';
    >
    >> {
    >> DOC.style.visibility='visible';
    >> DOC.style.display='block';

    >
    > 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.
     
    M.L., Aug 29, 2007
    #8
  9. M.L.

    Guest


    > 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 == "").
     
    , Aug 29, 2007
    #9
  10. M.L.

    M.L. Guest

    <> wrote in message
    news:
    >> 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 ==
    > "").


    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.
     
    M.L., Aug 29, 2007
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. dablick
    Replies:
    2
    Views:
    672
    dablick
    Dec 9, 2003
  2. Tom Castiglia

    Why does Gridview ALWAYS emit style="border-collapse: collapse;"

    Tom Castiglia, Jun 4, 2006, in forum: ASP .Net Web Controls
    Replies:
    2
    Views:
    2,026
    Tom Castiglia
    Jun 9, 2006
  3. David Jubinville

    Expand Collapse Script Woes

    David Jubinville, Jan 12, 2005, in forum: Javascript
    Replies:
    0
    Views:
    116
    David Jubinville
    Jan 12, 2005
  4. Randy Starkey

    expand / collapse all with this script

    Randy Starkey, Aug 8, 2005, in forum: Javascript
    Replies:
    1
    Views:
    96
    Randy Starkey
    Aug 10, 2005
  5. Replies:
    0
    Views:
    155
Loading...

Share This Page