#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep Power
    0

    Div - show and hide JavaScript


    I am trying to make the second div appeared but I am lost.

    My second div is hidden
    When I select an option - a radio button and press the button continue the second div shows up.

    For know I am just trying to make the hid and show work

    This is my code;


    <style>
    .duration {background-color:#04B4AE}
    .duration {color:black; font-size:large;}

    .type {background-colorurple}
    .type {color:black; font-size:large;}
    .type {display:none}


    </style>

    <script language="JavaScript">
    funtion selected()
    {

    document.getElementById('type').style.display = 'visible';

    }

    </script>

    <body>

    <div id="duration" class="duration">
    Duration <br>
    <input type="radio" name="duration" value="One" checked="checked">One Day <br>
    <input type="radio" name="duration" value="Weekend" checked="checked">Weekend (2 days)<br>

    <input type="button" value="Continued>>" onclick="selected()"/>

    </div>

    <div id="type" class="type">
    Vehicle type <br>
    <input type="radio" name="type" value="Compact" checked="checked">Compact car ($30pd) <br>
    <input type="radio" name="type" value="Midsize" checked="checked">Midsize car ($40pd)<br>
    <input type="radio" name="type" value="Fullsize" checked="checked">Fullsize car ($50pd) <br>

    <input type="button" id=bt2 value="Continued" onClick="selected();">

    </div>
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    I think you have some confusion between your CSS properties: display and visibility.

    https://developer.mozilla.org/en-US/docs/CSS/display
    https://developer.mozilla.org/en-US/docs/CSS/visibility

    You also have the following typo:-
    Code:
    function
    Use [highlight=HTML4Strict[color=black]][[/color]/highlight] or [code][/code] when posting your X/HTML.
    Last edited by Winters; March 18th, 2013 at 05:00 AM. Reason: Additional
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    8
    Rep Power
    0
    to make an object hidden with the display property, you want to set display to none. OR, you can use the visibility property, and change that to hidden.

    Or you could use jQuery if you really want to make things easy on yourself. Why reinvent the wheel?
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    9
    Rep Power
    0
    Originally Posted by Winters
    I think you have some confusion between your CSS properties: display and visibility.

    https://developer.mozilla.org/en-US/docs/CSS/display
    https://developer.mozilla.org/en-US/docs/CSS/visibility

    You also have the following typo:-
    Code:
    function
    Use [highlight=HTML4Strict[color=black]][[/color]/highlight] or [code][/code] when posting your X/HTML.
    Thank You. It was of great help.

IMN logo majestic logo threadwatch logo seochat tools logo