Hide / Show form Elements.

Discussion in 'Javascript' started by jerryyang_la1@yahoo.com, Sep 8, 2005.

  1. Guest

    I've found this script that allows be to hide/show form elements..

    <script language="JavaScript"><!--
    var toggle = true;

    function show(object) {
    if (document.layers && document.layers[object])
    document.layers[object].visibility = 'visible';
    else if (document.all) {
    document.all[object].style.visibility = 'visible';
    document.all[object].style.zIndex = 100;
    }
    }
    function hide(object) {
    if (document.layers && document.layers[object])
    document.layers[object].visibility = 'hidden';
    else if (document.all)
    document.all[object].style.visibility = 'hidden';
    }
    //--></script>

    <form>
    <input type="button" onClick="if (toggle = !toggle) hide('myId');else
    show('myId')" value="Show/Hide">
    </form>

    <div id="myId" style="position: absolute; visibility:
    visible;">Test</div>


    This works well, but I have a couple questions...

    1. Is there anyway to default this to HIDE ?
    2. How would I change the button, to a checkbox or image ?
    3. Any other script that will do that ?

    Thanks
     
    , Sep 8, 2005
    #1
    1. Advertising

  2. RobG Guest

    wrote:
    > I've found this script that allows be to hide/show form elements..
    >
    > <script language="JavaScript"><!--


    The language attribute is depreciated, type is required. Hiding scripts
    is no longer necessary.

    <script type="text/javascript">

    > var toggle = true;
    >
    > function show(object) {
    > if (document.layers && document.layers[object])
    > document.layers[object].visibility = 'visible';
    > else if (document.all) {
    > document.all[object].style.visibility = 'visible';
    > document.all[object].style.zIndex = 100;


    It will not work in browsers that don't support either document.all or
    layers (which is quite a few).

    > }
    > }
    > function hide(object) {
    > if (document.layers && document.layers[object])
    > document.layers[object].visibility = 'hidden';
    > else if (document.all)
    > document.all[object].style.visibility = 'hidden';
    > }
    > //--></script>
    >
    > <form>
    > <input type="button" onClick="if (toggle = !toggle) hide('myId');else
    > show('myId')" value="Show/Hide">
    > </form>
    >
    > <div id="myId" style="position: absolute; visibility:
    > visible;">Test</div>
    >
    >
    > This works well, but I have a couple questions...


    Then you didn't test it very extensively - it is also very clumsy.

    Try:

    function showHide( id )
    {
    var el;
    if (document.getElementById) {
    el = document.getElementById(id);
    } else if (document.all) {
    el = document.all[id];
    } else if (document.layers) {
    el = document.layers( id )
    }

    if ( el.style ){
    el.style.visibility =
    ('visible' == el.style.visibility)? 'hidden':'visible';
    }
    }

    The button becomes:

    <input type="button" onclick="showHide('myId');" value="Show/Hide">

    And the div:

    <div id="myId" style="visibility: visible;">Here is my div</div>


    I'd consider dropping the document.layers bit unless you have enough
    Netscape 4 visitors to justify it.

    >
    > 1. Is there anyway to default this to HIDE ?


    Use the above function and in the body tag:

    <body onload="showHide('myId');">

    That way users without JavaScript will not have the element hidden
    (without JS they'll never be able to reveal it).

    > 2. How would I change the button, to a checkbox or image ?


    First, you don't need a form around your button if the button is just
    there by itself.

    Second, you can use any element that has an onclick attribute (or any
    other intrinsic event you choose to use) defined in the HTML spec (which
    is most of them). But if you use a checkbox, should the element be
    hidden when its selected or shown?

    Let's say you want it hidden:

    <input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div

    <script type="text/javascript">
    function showHide2(cb, id)
    {
    if (!document.getElementById || !document.body.style) return;
    var el = document.getElementById( id );
    el.style.visibility = (cb.checked)? 'hidden':'visible';
    }
    </script>

    > 3. Any other script that will do that ?


    See above.



    --
    Rob
     
    RobG, Sep 8, 2005
    #2
    1. Advertising

  3. Guest

    RobG.. Thanks I will try this..

    The script I posted, I found on a script site.. It's not one I wrote !!

    Thanks again !!


    RobG wrote:
    > wrote:
    > > I've found this script that allows be to hide/show form elements..
    > >
    > > <script language="JavaScript"><!--

    >
    > The language attribute is depreciated, type is required. Hiding scripts
    > is no longer necessary.
    >
    > <script type="text/javascript">
    >
    > > var toggle = true;
    > >
    > > function show(object) {
    > > if (document.layers && document.layers[object])
    > > document.layers[object].visibility = 'visible';
    > > else if (document.all) {
    > > document.all[object].style.visibility = 'visible';
    > > document.all[object].style.zIndex = 100;

    >
    > It will not work in browsers that don't support either document.all or
    > layers (which is quite a few).
    >
    > > }
    > > }
    > > function hide(object) {
    > > if (document.layers && document.layers[object])
    > > document.layers[object].visibility = 'hidden';
    > > else if (document.all)
    > > document.all[object].style.visibility = 'hidden';
    > > }
    > > //--></script>
    > >
    > > <form>
    > > <input type="button" onClick="if (toggle = !toggle) hide('myId');else
    > > show('myId')" value="Show/Hide">
    > > </form>
    > >
    > > <div id="myId" style="position: absolute; visibility:
    > > visible;">Test</div>
    > >
    > >
    > > This works well, but I have a couple questions...

    >
    > Then you didn't test it very extensively - it is also very clumsy.
    >
    > Try:
    >
    > function showHide( id )
    > {
    > var el;
    > if (document.getElementById) {
    > el = document.getElementById(id);
    > } else if (document.all) {
    > el = document.all[id];
    > } else if (document.layers) {
    > el = document.layers( id )
    > }
    >
    > if ( el.style ){
    > el.style.visibility =
    > ('visible' == el.style.visibility)? 'hidden':'visible';
    > }
    > }
    >
    > The button becomes:
    >
    > <input type="button" onclick="showHide('myId');" value="Show/Hide">
    >
    > And the div:
    >
    > <div id="myId" style="visibility: visible;">Here is my div</div>
    >
    >
    > I'd consider dropping the document.layers bit unless you have enough
    > Netscape 4 visitors to justify it.
    >
    > >
    > > 1. Is there anyway to default this to HIDE ?

    >
    > Use the above function and in the body tag:
    >
    > <body onload="showHide('myId');">
    >
    > That way users without JavaScript will not have the element hidden
    > (without JS they'll never be able to reveal it).
    >
    > > 2. How would I change the button, to a checkbox or image ?

    >
    > First, you don't need a form around your button if the button is just
    > there by itself.
    >
    > Second, you can use any element that has an onclick attribute (or any
    > other intrinsic event you choose to use) defined in the HTML spec (which
    > is most of them). But if you use a checkbox, should the element be
    > hidden when its selected or shown?
    >
    > Let's say you want it hidden:
    >
    > <input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div
    >
    > <script type="text/javascript">
    > function showHide2(cb, id)
    > {
    > if (!document.getElementById || !document.body.style) return;
    > var el = document.getElementById( id );
    > el.style.visibility = (cb.checked)? 'hidden':'visible';
    > }
    > </script>
    >
    > > 3. Any other script that will do that ?

    >
    > See above.
    >
    >
    >
    > --
    > Rob
     
    , Sep 8, 2005
    #3
  4. Guest

    <input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div

    <script type="text/javascript">
    function showHide2(cb, id)
    {
    if (!document.getElementById || !document.body.style) return;
    var el = document.getElementById( id );
    el.style.visibility = (cb.checked)? 'hidden':'visible';
    }
    </script>

    I like this idea.. But I would prefer it hidden by default, and shown
    when selected.

    How do I do that ?? THANKS
     
    , Sep 8, 2005
    #4
  5. RobG Guest

    wrote:
    > <input type="checkbox" onclick="showHide2(this, 'myId');">Hide the div
    >
    > <script type="text/javascript">
    > function showHide2(cb, id)
    > {
    > if (!document.getElementById || !document.body.style) return;
    > var el = document.getElementById( id );
    > el.style.visibility = (cb.checked)? 'hidden':'visible';
    > }
    > </script>
    >
    > I like this idea.. But I would prefer it hidden by default, and shown
    > when selected.
    >
    > How do I do that ?? THANKS
    >


    Make your div not visible:

    <div ... visibility: hidden;">Test</div>


    Change the text on the checkbox:

    <input type="checkbox" onclick="showHide2(this, 'myId');">Show the div


    Adjust the logic of the function:

    ...
    el.style.visibility = (cb.checked)? 'visible':'hidden';


    And now users with JS disabled or not available will never see the
    content - I guess they could look at the source. :-x

    This issue is normally solved by making your page function properly
    without any scripting at all, then add script to enhance the 'user
    experience'. It is not good to have non-functioning checkboxes and
    buttons, so often other UI elements are used.

    The example below demonstrates some of this, it runs an onload function
    to add the onclick and hide stuff. If the page is big and heavy, the
    initialisation script could be added after the last 'container' div so
    it runs before the page has fully loaded. Otherwise users may see all
    the content displayed, then see it disappear when the onload runs.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Show/hide play</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    .heading {
    font-weight: bold; text-decoration: underline;
    cursor: pointer; font-family: verdana, sans-serif;
    padding-top: 5px; display: block;
    }
    .content {background-color: #dddddd; padding-left:10px;}
    </style>
    <script type="text/javascript">
    function showHide()
    {
    var idx = this.id.split('-')[1];
    var sp = document.getElementById('cont-'+idx);
    sp.style.display = ('' == sp.style.display)? 'none':'';
    }

    function initContent()
    {
    // Check that necessary features are supported
    if ( !document.getElementById
    || !document.getElementsByTagName
    || !document.body.style){
    return;
    }
    // Get all the div elements we need
    var x = document.getElementById('container');
    var divs = x.getElementsByTagName('div');
    // Depending on classname, add an onclick or hide
    var el, i = divs.length;
    while ( i-- ){
    el = divs;
    if (el.className && /\bheading\b/.test(el.className)){
    el.onclick = showHide;
    } else if (el.className && /\bcontent\b/.test(el.className)){
    el.style.display = 'none';
    }
    }
    }
    window.onload = initContent;
    </script>
    </head><body>
    <div style="border: 1px solid #ddddff;" id="container">
    <div class="heading" id="head-1">
    Here is the first heading</div>
    <div class="content" id="cont-1">
    Here is the first content<br>
    Here is the first content<br></div>
    <div class="heading" id="head-2">
    Here is the second heading</div>
    <div class="content" id="cont-2">
    Here is the second content<br></div>
    </div>
    </body>
    </html>





    --
    Rob
     
    RobG, Sep 9, 2005
    #5
    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. Guest
    Replies:
    3
    Views:
    13,548
    Walter Wang [MSFT]
    Jul 27, 2006
  2. Replies:
    1
    Views:
    1,748
    Neredbojias
    Oct 17, 2007
  3. Frances
    Replies:
    3
    Views:
    127
    Randy Webb
    Sep 9, 2005
  4. Replies:
    3
    Views:
    174
    Stephen Chalmers
    Oct 15, 2005
  5. ll
    Replies:
    2
    Views:
    683
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page