collapsable side bar (IE)

Discussion in 'Javascript' started by J, Jan 13, 2005.

  1. J

    J Guest

    Hello,

    I'd like to create sections that are collapsible via clicking on a
    graphic next to (or above) the section (e.g. collapsible cells of a table)

    I've given both the graphic and the section an ID property and I have
    written this:

    function hideShow (name1)
    {
    if (document.all(name1).style.display == "none")
    document.all(name1).style.display = "inline"
    else
    document.all(name1).style.display = "none"
    }

    which seems to work, but how can I pass in the image ID and have the
    image swapped each time I collapse/expand the section?

    any help appreciated,
    BK.
    J, Jan 13, 2005
    #1
    1. Advertising

  2. J

    FunGuySF Guest

    The simple answer is, provide a name in the image tag, then:

    document.images[imagename].src = "img/image1.jpg";

    However, when creating an image swap, you should consider precashing the
    images, so the user doesn't get bogged down with a delay (ugly visual
    stuff).

    To name the image tag:

    <img id="image1" border="0" src="img/image1.jpg" />

    To precash the images:

    var cachedImg = new Object( );
    cachedImg['image1'] = new Image();
    cachedImg['image1'].src = "img/image2.jpg";

    then, when you do the swap:

    document.images['image1'].src = cachedImg['image1'].src

    That'll do the trick!


    "J" <> wrote in message
    news:ssCFd.346$...
    > Hello,
    >
    > I'd like to create sections that are collapsible via clicking on a graphic
    > next to (or above) the section (e.g. collapsible cells of a table)
    >
    > I've given both the graphic and the section an ID property and I have
    > written this:
    >
    > function hideShow (name1)
    > {
    > if (document.all(name1).style.display == "none")
    > document.all(name1).style.display = "inline"
    > else
    > document.all(name1).style.display = "none"
    > }
    >
    > which seems to work, but how can I pass in the image ID and have the image
    > swapped each time I collapse/expand the section?
    >
    > any help appreciated,
    > BK.
    FunGuySF, Jan 13, 2005
    #2
    1. Advertising

  3. J

    Richard Guest

    On Thu, 13 Jan 2005 22:18:00 GMT J wrote:

    > Hello,


    > I'd like to create sections that are collapsible via clicking on a
    > graphic next to (or above) the section (e.g. collapsible cells of a
    > table)


    > I've given both the graphic and the section an ID property and I have
    > written this:


    > function hideShow (name1)
    > {
    > if (document.all(name1).style.display == "none")
    > document.all(name1).style.display = "inline"
    > else
    > document.all(name1).style.display = "none"
    > }


    > which seems to work, but how can I pass in the image ID and have the
    > image swapped each time I collapse/expand the section?


    > any help appreciated,
    > BK.



    DYnamicdrive.com has a menu called "switch menu" which does what you want.
    You can see it in action at my site www.somestuff.batcave.net/
    You're close though.
    Take a look at their source code to see what they did.
    Richard, Jan 14, 2005
    #3
  4. JRS: In article <ssCFd.346$>, dated Thu, 13
    Jan 2005 22:18:00, seen in news:comp.lang.javascript, J
    <> posted :

    >function hideShow (name1)
    >{
    >if (document.all(name1).style.display == "none")
    > document.all(name1).style.display = "inline"
    >else
    > document.all(name1).style.display = "none"
    >}
    >



    function hideShow (name1) { var T = document.all(name1).style
    T.display = (T.display == "none") ? "inline" : "none" }

    function hideShow (name1) { with (document.all(name1).style)
    display = (display == "none") ? "inline" : "none" }

    should be more economical equivalents.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Jan 14, 2005
    #4
    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. Matt
    Replies:
    0
    Views:
    3,529
  2. John Hann
    Replies:
    0
    Views:
    6,048
    John Hann
    Aug 21, 2004
  3. Brian Henry

    collapsable lists?

    Brian Henry, Mar 30, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    386
    Joseph Byrns
    Mar 31, 2005
  4. Matt
    Replies:
    9
    Views:
    70,777
  5. Matt
    Replies:
    9
    Views:
    530
    kaeli
    Aug 23, 2004
Loading...

Share This Page