Show/Hide table row

Discussion in 'Javascript' started by Aly, Jan 17, 2006.

  1. Aly

    Aly Guest

    I am building a site that sells 3 standard packages and one custom package.
    On the package selection page, I want the following:

    Upon loading the page, I want the package selections (Basic, Standard,
    Advanced, and Custom) to be visible, as well as an Email field and Payment
    Method field.

    I want nothing to happen when Basic, Standard, or Advanced are clicked. When
    Custom is clicked (radio buttons for all), I want the custom options to
    appear. If Basic, Standard, or Advanced are chosen again, I want the custom
    options to disappear.

    I have found a few different codes, but none of them do exactly what I am
    looking for. I have seen it done, and tried to copy the code, but it didn't
    work. I'm assuming there was something in a .js file that affected it.

    If anyone could help, I would be greatly appreciative.

    Aly
    Aly, Jan 17, 2006
    #1
    1. Advertising

  2. Aly

    Aly Guest

    Following up on myself...

    I have found one script that almost does what I want. However, I'm unsure
    how to make it work for more than 2 options. Here is the basic page html
    including the script so that someone may be able to help me.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script language="JavaScript" type="text/JavaScript">
    function ref(object)
    {
    if (document.getElementById)
    {
    return document.getElementById(object);
    }
    else if (document.all)
    {
    return eval('document.all.' + object);
    }
    else
    {
    return false;
    }
    }

    function expand(object)
    {
    var object = ref(object);

    if( !object.style )
    {
    return false;
    }
    else
    {
    object.style.display = '';
    }

    if (window.event)
    {
    window.event.cancelBubble = true;
    }
    }

    function contract(object)
    {
    var object = ref(object);

    if( !object.style )
    {
    return false;
    }
    else
    {
    object.style.display = 'none';
    }

    if (window.event)
    {
    window.event.cancelBubble = true;
    }
    }

    function toggle(object)
    {
    object = ref(object);
    if( !object.style )
    {
    return false;
    }

    if( object.style.display == 'none' )
    {
    object.style.display = '';
    }
    else
    {
    object.style.display = 'none';
    }
    }
    </script>

    </head>

    <body>
    <table width="100%" border="1" cellpadding="5" cellspacing="0"
    bordercolor="#000000">
    <tr>
    <td bgcolor="#CCCCCC">
    Hide Extra Content
    <select name="select" onchange="toggle('morestuff'); return false;">
    <option value="Yes" selected>Yes</option>
    <option value="No">No</option>
    </select></td>
    </tr>
    <tr>
    <td bgcolor="#CCCCCC">Here is some content that shows. </td>
    </tr>
    <tbody id="morestuff" style="display: none">
    <tr>
    <td bgcolor="#33FF00"><p>This is hidden content</p>
    </td>
    </tr>
    <tr>
    <td bgcolor="#FFFF00">This is hidden content </td>
    </tr>
    <tr>
    <td bgcolor="#FF66CC">This is hidden content </td>
    </tr>
    </tbody>
    <tr>
    <td bgcolor="#CCCCCC">Here is more content that shows. </td>
    </tr>
    </table>
    </body>
    </html>
    Aly, Jan 17, 2006
    #2
    1. Advertising

  3. On 17/01/2006 18:45, Aly wrote:

    [snip]

    > Upon loading the page, I want the package selections (Basic, Standard,
    > Advanced, and Custom) to be visible, as well as an Email field and Payment
    > Method field.
    >
    > I want nothing to happen when Basic, Standard, or Advanced are clicked. When
    > Custom is clicked (radio buttons for all), I want the custom options to
    > appear. If Basic, Standard, or Advanced are chosen again, I want the custom
    > options to disappear.


    Could you please post a link to the document as it stands now. It would
    be much easier to describe a solution if we can see precisely what
    markup will be involved (especially if changes to that markup are
    necessary).

    [snip]

    Mike

    --
    Michael Winter
    Prefix subject with [News] before replying by e-mail.
    Michael Winter, Jan 19, 2006
    #3
  4. Aly

    Aly Guest

    "Michael Winter" <> wrote in message
    > Could you please post a link to the document as it stands now. It would be
    > much easier to describe a solution if we can see precisely what markup
    > will be involved (especially if changes to that markup are necessary).


    Actually, it's not necessary :) I managed to figure it out on my own, and it
    now works marvelously :) Thanks, though!

    Aly
    Aly, Jan 19, 2006
    #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. RA
    Replies:
    1
    Views:
    3,969
  2. phl
    Replies:
    1
    Views:
    4,343
    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:
    257
    Martin Honnen
    Mar 6, 2004
  4. oLE

    show/hide a table row

    oLE, Dec 13, 2004, in forum: Javascript
    Replies:
    9
    Views:
    247
  5. Replies:
    6
    Views:
    216
Loading...

Share This Page