show/hide a table row

Discussion in 'Javascript' started by oLE, Dec 13, 2004.

  1. oLE

    oLE Guest

    I would like to add some javascript to show/hide a certain row of a
    table. The first row of the table contain the hyperlink that calls the
    javascript the second row is the one i want to show/hide with the
    javascript in a toggle fashion.

    the problem is a know very little javascript and have become incredibly
    frustrated because i went ahead thinking it was going to be like C. its not.

    I know i can use these lines to do the actual work:

    document.getElementById("row").style.display = "none"; // hides row
    document.getElementById("row").style.display = "inline"; // shows row

    but I don't think i can use a getElementById exactly because i want to
    reference the element via its relationship to the hyperlink that calls
    the javascript, i know this can be done. You see there will be several
    tables on one page and i want to be able to toggle each one
    independently; hopefully with the same bit of javascript.

    any help greatly appriecated,
    thanks in advance.

    oLE
     
    oLE, Dec 13, 2004
    #1
    1. Advertising

  2. oLE

    WindAndWaves Guest

    "oLE" <> wrote in message
    news:41bd6537$0$317$...
    > I would like to add some javascript to show/hide a certain row of a
    > table. The first row of the table contain the hyperlink that calls the
    > javascript the second row is the one i want to show/hide with the
    > javascript in a toggle fashion.
    >
    > the problem is a know very little javascript and have become incredibly
    > frustrated because i went ahead thinking it was going to be like C. its

    not.
    >
    > I know i can use these lines to do the actual work:
    >
    > document.getElementById("row").style.display = "none"; // hides row
    > document.getElementById("row").style.display = "inline"; // shows row
    >
    > but I don't think i can use a getElementById exactly because i want to
    > reference the element via its relationship to the hyperlink that calls
    > the javascript, i know this can be done. You see there will be several
    > tables on one page and i want to be able to toggle each one
    > independently; hopefully with the same bit of javascript.
    >
    > any help greatly appriecated,
    > thanks in advance.
    >
    > oLE


    Hi Ole

    Have a look at www.corstorphinehouse.com/d/avail.html, it is a bit
    complicated, but it may help you...
     
    WindAndWaves, Dec 13, 2004
    #2
    1. Advertising

  3. oLE

    RobB Guest

    oLE wrote:
    > I would like to add some javascript to show/hide a certain row of a
    > table. The first row of the table contain the hyperlink that calls

    the
    > javascript the second row is the one i want to show/hide with the
    > javascript in a toggle fashion.
    >
    > the problem is a know very little javascript and have become

    incredibly
    > frustrated because i went ahead thinking it was going to be like C.

    its not.
    >
    > I know i can use these lines to do the actual work:
    >
    > document.getElementById("row").style.display = "none"; // hides row
    > document.getElementById("row").style.display = "inline"; // shows row
    >
    > but I don't think i can use a getElementById exactly because i want

    to
    > reference the element via its relationship to the hyperlink that

    calls
    > the javascript, i know this can be done. You see there will be

    several
    > tables on one page and i want to be able to toggle each one
    > independently; hopefully with the same bit of javascript.
    >
    > any help greatly appriecated,
    > thanks in advance.
    >
    > oLE


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>untitled</title>
    <style type="text/css">

    body {
    font: 80% verdana;
    background : #600;
    }
    #redtable {
    width: 400px;
    margin: 24px auto;
    background: #faa;
    }
    #greentable {
    width: 400px;
    margin: 24px auto;
    background: #afa;
    }
    #bluetable {
    width: 400px;
    margin: 24px auto;
    background: #aaf;
    }
    td {
    letter-spacing: .5em;
    text-align: center;
    border: 3px #fff groove;
    }
    td a {
    letter-spacing: .05em;
    color: #000;
    }
    td a:hover {
    color: #f00;
    }

    </style>
    <script type="text/javascript">
    //<![CDATA[

    function toggle(oLink)
    {
    var obj = oLink;
    ///start at Link node
    while (obj && !/tbody/i.test(obj.parentNode.nodeName))
    //traverse up to tbody
    obj = obj.parentNode;
    //then over to next tr
    var nextrow = obj.nextSibling;
    if (null != nextrow)
    {
    //Style object
    var s = nextrow.style;
    //toggle display
    s.display = (s.display == 'none') ? '' : 'none';
    var txt = 'show rowhide row';
    //remove current link text from string
    txt = txt.replace(oLink.firstChild.nodeValue, '');
    //append remaining substring
    oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
    }
    }

    //]]>
    </script>
    </head>
    <body>
    <table id="redtable">
    <tbody>
    <tr>
    <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    </tr><tr>
    <td>blah blah blah blah blah</td>
    </tr>
    </tbody>
    </table>
    <table id="greentable">
    <tbody>
    <tr>
    <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    </tr><tr>
    <td>blah blah blah blah blah</td>
    </tr>
    </tbody>
    </table>
    <table id="bluetable">
    <tbody>
    <tr>
    <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    </tr><tr>
    <td>blah blah blah blah blah</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    Table elements have their own proprietary CSS display values.
    For rows it's ---> "table-row".
    There seems to be some controversy about the portability of
    setting CSS display to the empty string, which in theory will
    cause the browser to supply the default (rendered value). Sure
    they'll be some comment on this...
    http://www.blooberry.com/indexdot/css/properties/classify/display.htm
     
    RobB, Dec 13, 2004
    #3
  4. oLE

    oLE Guest

    RobB wrote:

    > oLE wrote:
    >
    >>I would like to add some javascript to show/hide a certain row of a
    >>table. The first row of the table contain the hyperlink that calls

    >
    > the
    >
    >>javascript the second row is the one i want to show/hide with the
    >>javascript in a toggle fashion.
    >>
    >>the problem is a know very little javascript and have become

    >
    > incredibly
    >
    >>frustrated because i went ahead thinking it was going to be like C.

    >
    > its not.
    >
    >>I know i can use these lines to do the actual work:
    >>
    >>document.getElementById("row").style.display = "none"; // hides row
    >>document.getElementById("row").style.display = "inline"; // shows row
    >>
    >>but I don't think i can use a getElementById exactly because i want

    >
    > to
    >
    >>reference the element via its relationship to the hyperlink that

    >
    > calls
    >
    >>the javascript, i know this can be done. You see there will be

    >
    > several
    >
    >>tables on one page and i want to be able to toggle each one
    >>independently; hopefully with the same bit of javascript.
    >>
    >>any help greatly appriecated,
    >>thanks in advance.
    >>
    >>oLE

    >
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    > <head>
    > <title>untitled</title>
    > <style type="text/css">
    >
    > body {
    > font: 80% verdana;
    > background : #600;
    > }
    > #redtable {
    > width: 400px;
    > margin: 24px auto;
    > background: #faa;
    > }
    > #greentable {
    > width: 400px;
    > margin: 24px auto;
    > background: #afa;
    > }
    > #bluetable {
    > width: 400px;
    > margin: 24px auto;
    > background: #aaf;
    > }
    > td {
    > letter-spacing: .5em;
    > text-align: center;
    > border: 3px #fff groove;
    > }
    > td a {
    > letter-spacing: .05em;
    > color: #000;
    > }
    > td a:hover {
    > color: #f00;
    > }
    >
    > </style>
    > <script type="text/javascript">
    > //<![CDATA[
    >
    > function toggle(oLink)
    > {
    > var obj = oLink;
    > ///start at Link node
    > while (obj && !/tbody/i.test(obj.parentNode.nodeName))
    > //traverse up to tbody
    > obj = obj.parentNode;
    > //then over to next tr
    > var nextrow = obj.nextSibling;
    > if (null != nextrow)
    > {
    > //Style object
    > var s = nextrow.style;
    > //toggle display
    > s.display = (s.display == 'none') ? '' : 'none';
    > var txt = 'show rowhide row';
    > //remove current link text from string
    > txt = txt.replace(oLink.firstChild.nodeValue, '');
    > //append remaining substring
    > oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
    > }
    > }
    >
    > //]]>
    > </script>
    > </head>
    > <body>
    > <table id="redtable">
    > <tbody>
    > <tr>
    > <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    > </tr><tr>
    > <td>blah blah blah blah blah</td>
    > </tr>
    > </tbody>
    > </table>
    > <table id="greentable">
    > <tbody>
    > <tr>
    > <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    > </tr><tr>
    > <td>blah blah blah blah blah</td>
    > </tr>
    > </tbody>
    > </table>
    > <table id="bluetable">
    > <tbody>
    > <tr>
    > <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    > </tr><tr>
    > <td>blah blah blah blah blah</td>
    > </tr>
    > </tbody>
    > </table>
    > </body>
    > </html>
    >
    > Table elements have their own proprietary CSS display values.
    > For rows it's ---> "table-row".
    > There seems to be some controversy about the portability of
    > setting CSS display to the empty string, which in theory will
    > cause the browser to supply the default (rendered value). Sure
    > they'll be some comment on this...
    > http://www.blooberry.com/indexdot/css/properties/classify/display.htm
    >


    thanks for your help RobB and WindAndWaves, i'll give these a go.

    oLE
     
    oLE, Dec 13, 2004
    #4
  5. On Mon, 13 Dec 2004 09:47:49 +0000, oLE <> wrote:

    [snip]

    > document.getElementById("row").style.display = "inline"; // shows row


    If you did do that, you'd almost certainly have problems.

    Table rows are not inline elements. They're closer to block elements but
    they have their own display value: table-row. However, as IE doesn't
    support that (it incorrectly uses block), it is best not to specify a
    value at all. Instead, assign an empty string to remove the inline style
    causing the page stylesheet to take effect.

    As a side-effect, this will enforce something that should happen anyway:
    you must not hide the row initially using CSS. The reason for this is that
    users without the necessary scripting support will never be able to see
    the row. Instead, hide the row via scripting.

    > but I don't think i can use a getElementById exactly because i want to
    > reference the element via its relationship to the hyperlink that calls
    > the javascript


    Unless you actually tell us what that relationship is - preferably by
    linking to the document in question - it's difficult to give you anything
    useful.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Dec 13, 2004
    #5
  6. oLE

    oLE Guest

    RobB wrote:

    > oLE wrote:
    >
    >>I would like to add some javascript to show/hide a certain row of a
    >>table. The first row of the table contain the hyperlink that calls

    >
    > the
    >
    >>javascript the second row is the one i want to show/hide with the
    >>javascript in a toggle fashion.
    >>
    >>the problem is a know very little javascript and have become

    >
    > incredibly
    >
    >>frustrated because i went ahead thinking it was going to be like C.

    >
    > its not.
    >
    >>I know i can use these lines to do the actual work:
    >>
    >>document.getElementById("row").style.display = "none"; // hides row
    >>document.getElementById("row").style.display = "inline"; // shows row
    >>
    >>but I don't think i can use a getElementById exactly because i want

    >
    > to
    >
    >>reference the element via its relationship to the hyperlink that

    >
    > calls
    >
    >>the javascript, i know this can be done. You see there will be

    >
    > several
    >
    >>tables on one page and i want to be able to toggle each one
    >>independently; hopefully with the same bit of javascript.
    >>
    >>any help greatly appriecated,
    >>thanks in advance.
    >>
    >>oLE

    >
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    > <head>
    > <title>untitled</title>
    > <style type="text/css">
    >
    > body {
    > font: 80% verdana;
    > background : #600;
    > }
    > #redtable {
    > width: 400px;
    > margin: 24px auto;
    > background: #faa;
    > }
    > #greentable {
    > width: 400px;
    > margin: 24px auto;
    > background: #afa;
    > }
    > #bluetable {
    > width: 400px;
    > margin: 24px auto;
    > background: #aaf;
    > }
    > td {
    > letter-spacing: .5em;
    > text-align: center;
    > border: 3px #fff groove;
    > }
    > td a {
    > letter-spacing: .05em;
    > color: #000;
    > }
    > td a:hover {
    > color: #f00;
    > }
    >
    > </style>
    > <script type="text/javascript">
    > //<![CDATA[
    >
    > function toggle(oLink)
    > {
    > var obj = oLink;
    > ///start at Link node
    > while (obj && !/tbody/i.test(obj.parentNode.nodeName))
    > //traverse up to tbody
    > obj = obj.parentNode;
    > //then over to next tr
    > var nextrow = obj.nextSibling;
    > if (null != nextrow)
    > {
    > //Style object
    > var s = nextrow.style;
    > //toggle display
    > s.display = (s.display == 'none') ? '' : 'none';
    > var txt = 'show rowhide row';
    > //remove current link text from string
    > txt = txt.replace(oLink.firstChild.nodeValue, '');
    > //append remaining substring
    > oLink.replaceChild(document.createTextNode(txt), oLink.firstChild);
    > }
    > }
    >
    > //]]>
    > </script>
    > </head>
    > <body>
    > <table id="redtable">
    > <tbody>
    > <tr>
    > <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    > </tr><tr>
    > <td>blah blah blah blah blah</td>
    > </tr>
    > </tbody>
    > </table>
    > <table id="greentable">
    > <tbody>
    > <tr>
    > <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    > </tr><tr>
    > <td>blah blah blah blah blah</td>
    > </tr>
    > </tbody>
    > </table>
    > <table id="bluetable">
    > <tbody>
    > <tr>
    > <td><a href="#null" onclick="toggle(this)">hide row</a></td>
    > </tr><tr>
    > <td>blah blah blah blah blah</td>
    > </tr>
    > </tbody>
    > </table>
    > </body>
    > </html>
    >
    > Table elements have their own proprietary CSS display values.
    > For rows it's ---> "table-row".
    > There seems to be some controversy about the portability of
    > setting CSS display to the empty string, which in theory will
    > cause the browser to supply the default (rendered value). Sure
    > they'll be some comment on this...
    > http://www.blooberry.com/indexdot/css/properties/classify/display.htm
    >


    RobB this is great stuff i think i can get it to work on my site.
    To show you exactly what i need to do look at
    www.olespace.com/content_rants.php

    the text inside those big tables is the row i want to show and hide, it
    needs to start out hidden as well.

    i was also hoping to use an two images (on and off state) for the
    show/hide hyperlink but don't worry if that's too difficult.

    oLE
     
    oLE, Dec 13, 2004
    #6
  7. oLE

    RobB Guest

    oLE wrote:

    (snip)

    > RobB this is great stuff i think i can get it to work on my site.
    > To show you exactly what i need to do look at
    > www.olespace.com/content_rants.php
    >
    > the text inside those big tables is the row i want to show and hide,

    it
    > needs to start out hidden as well.
    >
    > i was also hoping to use an two images (on and off state) for the
    > show/hide hyperlink but don't worry if that's too difficult.
    >
    > oLE



    Addl. CSS:

    ..contract {
    display: none;
    }
    ..expand {
    [anything but display]
    }
    td a img {
    border: none;
    }
    ..preload {
    background:
    url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}


    JS:

    function toggle(node1)
    {
    if (document.getElementById && document.createTextNode)
    {
    var node2 = node1;
    while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
    continue;
    while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
    continue;
    if (null != node2)
    {
    var cnames = 'expandcontract', i = 0;
    node2.className = cnames.replace(node2.className, '');
    node1 = node1.childNodes;
    while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
    continue;
    if (null != node1)
    node1.src = (/folderopen/.test(node1.src)) ?
    node1.src.replace(/folderopen/, 'folder') :
    node1.src.replace(/folder/, 'folderopen');
    }
    }
    return false;
    }


    HTML:

    <table width="100%" cellpadding="10" class="rantbox">
    <tbody>
    <tr>
    <td>
    <a href="#null" onclick="return toggle(this)">
    <img
    src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
    />
    </a><b>Monory</b> Nothing is Limitless<hr>
    </td>
    </tr>
    <tr class="contract">
    <td width="50%">
    News of an exciting new announcement from Google Labs, this is what
    Google's
    Director of new Technology had to say:<p><p>.....

    ...............
    ...............

    Posted by oLE on 10th December 2004 at 15:13:10
    </tr></td></tbody></table>
    <br></br>
    <table width="100%" cellpadding="10" class="rantbox">
    <tbody>
    <tr>
    <td>
    <a href="#null" onclick="return toggle(this)"><img
    src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
    /></a>
    <b>Fill This Space</b> Got a Rant?<hr>
    </td>
    </tr>
    <tr class="contract">
    <td width="50%">
    <a href="mailto:eek:">Email.........


    googlegroups will probably mangle this so, watch for word (c)rap.
    Just a guess on the image trigger.
    Be sure and return false on any hyperlink onclick call.
     
    RobB, Dec 13, 2004
    #7
  8. oLE

    oLE Guest

    RobB wrote:

    > oLE wrote:
    >
    > (snip)
    >
    >
    >>RobB this is great stuff i think i can get it to work on my site.
    >>To show you exactly what i need to do look at
    >>www.olespace.com/content_rants.php
    >>
    >>the text inside those big tables is the row i want to show and hide,

    >
    > it
    >
    >>needs to start out hidden as well.
    >>
    >>i was also hoping to use an two images (on and off state) for the
    >>show/hide hyperlink but don't worry if that's too difficult.
    >>
    >>oLE

    >
    >
    >
    > Addl. CSS:
    >
    > .contract {
    > display: none;
    > }
    > .expand {
    > [anything but display]
    > }
    > td a img {
    > border: none;
    > }
    > .preload {
    > background:
    > url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
    >
    >
    > JS:
    >
    > function toggle(node1)
    > {
    > if (document.getElementById && document.createTextNode)
    > {
    > var node2 = node1;
    > while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
    > continue;
    > while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
    > continue;
    > if (null != node2)
    > {
    > var cnames = 'expandcontract', i = 0;
    > node2.className = cnames.replace(node2.className, '');
    > node1 = node1.childNodes;
    > while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
    > continue;
    > if (null != node1)
    > node1.src = (/folderopen/.test(node1.src)) ?
    > node1.src.replace(/folderopen/, 'folder') :
    > node1.src.replace(/folder/, 'folderopen');
    > }
    > }
    > return false;
    > }
    >
    >
    > HTML:
    >
    > <table width="100%" cellpadding="10" class="rantbox">
    > <tbody>
    > <tr>
    > <td>
    > <a href="#null" onclick="return toggle(this)">
    > <img
    > src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
    > />
    > </a><b>Monory</b> Nothing is Limitless<hr>
    > </td>
    > </tr>
    > <tr class="contract">
    > <td width="50%">
    > News of an exciting new announcement from Google Labs, this is what
    > Google's
    > Director of new Technology had to say:<p><p>.....
    >
    > ..............
    > ..............
    >
    > Posted by oLE on 10th December 2004 at 15:13:10
    > </tr></td></tbody></table>
    > <br></br>
    > <table width="100%" cellpadding="10" class="rantbox">
    > <tbody>
    > <tr>
    > <td>
    > <a href="#null" onclick="return toggle(this)"><img
    > src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
    > /></a>
    > <b>Fill This Space</b> Got a Rant?<hr>
    > </td>
    > </tr>
    > <tr class="contract">
    > <td width="50%">
    > <a href="mailto:eek:">Email.........
    >
    >
    > googlegroups will probably mangle this so, watch for word (c)rap.
    > Just a guess on the image trigger.
    > Be sure and return false on any hyperlink onclick call.
    >


    http://www.olespace.com/test.htm

    working. if is still does the same when i add in the php and stuff then
    i'm more than happy. thank you so much for all your help rob, i really
    appreciate it, you have saved my life here. I'll make sure the source
    code credits you.

    oLE
     
    oLE, Dec 14, 2004
    #8
  9. oLE

    oLE Guest

    oLE wrote:
    > RobB wrote:
    >
    >> oLE wrote:
    >>
    >> (snip)
    >>
    >>
    >>> RobB this is great stuff i think i can get it to work on my site.
    >>> To show you exactly what i need to do look at
    >>> www.olespace.com/content_rants.php
    >>>
    >>> the text inside those big tables is the row i want to show and hide,

    >>
    >>
    >> it
    >>
    >>> needs to start out hidden as well.
    >>>
    >>> i was also hoping to use an two images (on and off state) for the
    >>> show/hide hyperlink but don't worry if that's too difficult.
    >>>
    >>> oLE

    >>
    >>
    >>
    >>
    >> Addl. CSS:
    >>
    >> .contract {
    >> display: none;
    >> }
    >> .expand {
    >> [anything but display]
    >> }
    >> td a img {
    >> border: none;
    >> }
    >> .preload {
    >> background:
    >> url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}
    >>
    >>
    >>
    >> JS:
    >>
    >> function toggle(node1)
    >> {
    >> if (document.getElementById && document.createTextNode)
    >> {
    >> var node2 = node1;
    >> while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
    >> continue;
    >> while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
    >> continue;
    >> if (null != node2)
    >> {
    >> var cnames = 'expandcontract', i = 0;
    >> node2.className = cnames.replace(node2.className, '');
    >> node1 = node1.childNodes;
    >> while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
    >> continue;
    >> if (null != node1)
    >> node1.src = (/folderopen/.test(node1.src)) ?
    >> node1.src.replace(/folderopen/, 'folder') :
    >> node1.src.replace(/folder/, 'folderopen');
    >> }
    >> }
    >> return false;
    >> }
    >>
    >>
    >> HTML:
    >>
    >> <table width="100%" cellpadding="10" class="rantbox">
    >> <tbody>
    >> <tr>
    >> <td>
    >> <a href="#null" onclick="return toggle(this)">
    >> <img
    >> src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
    >>
    >> />
    >> </a><b>Monory</b> Nothing is Limitless<hr>
    >> </td>
    >> </tr>
    >> <tr class="contract">
    >> <td width="50%">
    >> News of an exciting new announcement from Google Labs, this is what
    >> Google's
    >> Director of new Technology had to say:<p><p>.....
    >>
    >> ..............
    >> ..............
    >>
    >> Posted by oLE on 10th December 2004 at 15:13:10
    >> </tr></td></tbody></table>
    >> <br></br>
    >> <table width="100%" cellpadding="10" class="rantbox">
    >> <tbody>
    >> <tr>
    >> <td>
    >> <a href="#null" onclick="return toggle(this)"><img
    >> src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"
    >>
    >> /></a>
    >> <b>Fill This Space</b> Got a Rant?<hr>
    >> </td>
    >> </tr>
    >> <tr class="contract">
    >> <td width="50%">
    >> <a href="mailto:eek:">Email.........
    >>
    >>
    >> googlegroups will probably mangle this so, watch for word (c)rap.
    >> Just a guess on the image trigger.
    >> Be sure and return false on any hyperlink onclick call.
    >>

    >
    > http://www.olespace.com/test.htm
    >
    > working. if is still does the same when i add in the php and stuff then
    > i'm more than happy. thank you so much for all your help rob, i really
    > appreciate it, you have saved my life here. I'll make sure the source
    > code credits you.
    >
    > oLE


    sorry for double post but you might want to look at www.olespace.com and
    then click rants on the nav bar to see it in proper working action.
    can't get the pluses to turn to minuses but to be honest i don't care.

    oLE
     
    oLE, Dec 14, 2004
    #9
  10. oLE

    RobB Guest

    oLE wrote:
    > oLE wrote:
    > > RobB wrote:
    > >
    > >> oLE wrote:
    > >>
    > >> (snip)
    > >>
    > >>
    > >>> RobB this is great stuff i think i can get it to work on my site.
    > >>> To show you exactly what i need to do look at
    > >>> www.olespace.com/content_rants.php
    > >>>
    > >>> the text inside those big tables is the row i want to show and

    hide,
    > >>
    > >>
    > >> it
    > >>
    > >>> needs to start out hidden as well.
    > >>>
    > >>> i was also hoping to use an two images (on and off state) for the
    > >>> show/hide hyperlink but don't worry if that's too difficult.
    > >>>
    > >>> oLE
    > >>
    > >>
    > >>
    > >>
    > >> Addl. CSS:
    > >>
    > >> .contract {
    > >> display: none;
    > >> }
    > >> .expand {
    > >> [anything but display]
    > >> }
    > >> td a img {
    > >> border: none;
    > >> }
    > >> .preload {
    > >> background:
    > >>

    url(http://www.softcomplex.com/products/tigra_tree_menu/icons/folderopen.gif);}

    > >>
    > >>
    > >>
    > >> JS:
    > >>
    > >> function toggle(node1)
    > >> {
    > >> if (document.getElementById && document.createTextNode)
    > >> {
    > >> var node2 = node1;
    > >> while ((node2 = node2.parentNode) && !/tr/i.test(node2.nodeName))
    > >> continue;
    > >> while ((node2 = node2.nextSibling) && !/tr/i.test(node2.nodeName))
    > >> continue;
    > >> if (null != node2)
    > >> {
    > >> var cnames = 'expandcontract', i = 0;
    > >> node2.className = cnames.replace(node2.className, '');
    > >> node1 = node1.childNodes;
    > >> while ((node1 = node1.item(i++)) && !/img/i.test(node1.nodeName))
    > >> continue;
    > >> if (null != node1)
    > >> node1.src = (/folderopen/.test(node1.src)) ?
    > >> node1.src.replace(/folderopen/, 'folder') :
    > >> node1.src.replace(/folder/, 'folderopen');
    > >> }
    > >> }
    > >> return false;
    > >> }
    > >>
    > >>
    > >> HTML:
    > >>
    > >> <table width="100%" cellpadding="10" class="rantbox">
    > >> <tbody>
    > >> <tr>
    > >> <td>
    > >> <a href="#null" onclick="return toggle(this)">
    > >> <img
    > >>

    src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

    > >>
    > >> />
    > >> </a><b>Monory</b> Nothing is Limitless<hr>
    > >> </td>
    > >> </tr>
    > >> <tr class="contract">
    > >> <td width="50%">
    > >> News of an exciting new announcement from Google Labs, this is

    what
    > >> Google's
    > >> Director of new Technology had to say:<p><p>.....
    > >>
    > >> ..............
    > >> ..............
    > >>
    > >> Posted by oLE on 10th December 2004 at 15:13:10
    > >> </tr></td></tbody></table>
    > >> <br></br>
    > >> <table width="100%" cellpadding="10" class="rantbox">
    > >> <tbody>
    > >> <tr>
    > >> <td>
    > >> <a href="#null" onclick="return toggle(this)"><img
    > >>

    src="http://www.softcomplex.com/products/tigra_tree_menu/icons/folder.gif"

    > >>
    > >> /></a>
    > >> <b>Fill This Space</b> Got a Rant?<hr>
    > >> </td>
    > >> </tr>
    > >> <tr class="contract">
    > >> <td width="50%">
    > >> <a href="mailto:eek:">Email.........
    > >>
    > >>
    > >> googlegroups will probably mangle this so, watch for word (c)rap.
    > >> Just a guess on the image trigger.
    > >> Be sure and return false on any hyperlink onclick call.
    > >>

    > >
    > > http://www.olespace.com/test.htm
    > >
    > > working. if is still does the same when i add in the php and stuff

    then
    > > i'm more than happy. thank you so much for all your help rob, i

    really
    > > appreciate it, you have saved my life here. I'll make sure the

    source
    > > code credits you.
    > >
    > > oLE

    >
    > sorry for double post but you might want to look at www.olespace.com

    and
    > then click rants on the nav bar to see it in proper working action.
    > can't get the pluses to turn to minuses but to be honest i don't

    care.
    >
    > oLE


    Yes you do....

    See this?
    ...............
    node1.src = (/folderopen/.test(node1.src)) ?
    node1.src.replace(/folderopen/, 'folder') :
    node1.src.replace(/folder/, 'folderopen');
    ...............

    It's what switches the icon's src. Obviously, it's set up for that
    demo, with its folder images ('folder.gif', 'folderopen.gif'). You'll
    need to change it for those new pix:

    node1.src = (/plus/.test(node1.src)) ?
    node1.src.replace(/plus/, 'minus') :
    node1.src.replace(/minus/, 'plus');

    Just guessing that the other image is
    'http://www.olespace.com/gfx/minus.gif'. Also - this CSS should be...

    ..preload {
    background-image: url(http://www.olespace.com/gfx/minus.gif);
    }

    ....as it's designed solely to preload the alternate image. hth
     
    RobB, Dec 14, 2004
    #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. RA
    Replies:
    1
    Views:
    4,032
  2. phl
    Replies:
    1
    Views:
    4,388
    Martin Jay
    Jun 8, 2006
  3. Mad Scientist Jr

    dynamically show/hide a table row in most browsers?

    Mad Scientist Jr, Mar 4, 2004, in forum: Javascript
    Replies:
    7
    Views:
    276
    Martin Honnen
    Mar 6, 2004
  4. Aly

    Show/Hide table row

    Aly, Jan 17, 2006, in forum: Javascript
    Replies:
    3
    Views:
    230
  5. Replies:
    6
    Views:
    229
Loading...

Share This Page