how to expand and hide sub-button

Discussion in 'Javascript' started by john_woo, Jan 10, 2006.

  1. john_woo

    john_woo Guest

    Hi,

    I'm wondering how to use javascript to do something like:


    TOP_Button

    when clicking on it, it becomes:

    TOP_Button
    sub_button_1
    sub_button_2

    and clicking TOP_Button again, two sub_buttons get hidden.

    but clicking on sub_button, it should not be hidden.

    --
    Thanks
    John
    Toronto
    john_woo, Jan 10, 2006
    #1
    1. Advertising

  2. john_woo

    Jonas Raoni Guest

    Jonas Raoni, Jan 10, 2006
    #2
    1. Advertising

  3. john_woo

    Guest

    Use the button element's hidden attribute, for example:

    function unHideButton(buttonID)
    {
    node = document.getElementById("buttonID");
    node.style.hidden = "visible";
    }

    function hideButton(buttonID)
    {
    node = document.getElementById("buttonID");
    node.style.hidden = "hidden";
    }
    , Jan 10, 2006
    #3
  4. john_woo

    RobG Guest

    wrote:
    > Use the button element's hidden attribute, for example:


    No, don't. An HTML button element doesn't have a 'hidden' attribute and
    there is no CSS 'hidden' property, though the visibility property can
    have a value of 'hidden'.

    <URL: http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility >


    >
    > function unHideButton(buttonID)
    > {
    > node = document.getElementById("buttonID");


    There doesn't seem to be any need to make 'node' global, so keep it local.

    var node = document.getElementById("buttonID");


    > node.style.hidden = "visible";


    if (node) node.style.visibility = "visible";


    or

    node && node.style.visibility = "visible";


    getElementById and support for the element's style object should be
    feature tested.

    The best way is to add functions dynamically so that if the appropriate
    features aren't supported, the functions that require them aren't called
    and the browser is left in a state that allows it to function without them.

    Guessing that the functions are to be run using an onclick, all the
    buttons could be made visible by default and a script used to detect
    features and then add the functions and modify their style if appropriate.


    > }
    >
    > function hideButton(buttonID)
    > {
    > node = document.getElementById("buttonID");
    > node.style.hidden = "hidden";


    var node = document.getElementById("buttonID");
    node && node.style.visibility = "hidden";

    > }
    >



    --
    Rob
    RobG, Jan 11, 2006
    #4
  5. john_woo

    RobG Guest

    john_woo wrote:
    > Hi,
    >
    > I'm wondering how to use javascript to do something like:
    >
    >
    > TOP_Button
    >
    > when clicking on it, it becomes:
    >
    > TOP_Button
    > sub_button_1
    > sub_button_2
    >
    > and clicking TOP_Button again, two sub_buttons get hidden.
    >
    > but clicking on sub_button, it should not be hidden.


    If you are trying to create an hierarchical menu system, there are lots
    of those around (though they're mostly pretty awful).

    <URL:
    http://search.atomz.com/search/?sp-...=sp1002d27b&sp-f=ISO-8859-1&sp-p=All&sp-k=All
    >


    The example below does what you want, you should be able to modify it
    fairly easily to use buttons if that's what's really needed.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title> new document </title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=ISO-8859-1">

    <style type="text/css">
    ..clickable {
    cursor: pointer;
    color: #00f;
    background-color: #fff;
    text-decoration: underline;
    }
    </style>

    <script type="text/javascript">
    function initList(id)
    {
    // Check features before applying modifications
    if ( !document.getElementById
    || !document.getElementsByTagName) {
    return;
    }

    // Get the button
    var topBtn = document.getElementById(id);

    // More feature testing
    if (!topBtn.style || !topBtn.parentNode) return;

    // Get it's LI parent
    var btnParent = getParentByTagName(topBtn, 'li');
    if (!btnParent) return;

    // Get the first UL child node
    var btnSet = btnParent.getElementsByTagName('ul')[0];

    // If next test OK, do changes else do nothing
    if (btnSet){
    topBtn.className = 'clickable';
    toggleVis(btnSet);
    topBtn.onclick = function(){toggleVis(btnSet);}
    }
    }

    function getParentByTagName(el, nn)
    {
    nn = nn.toLowerCase();
    while (el.parentNode && nn != el.nodeName.toLowerCase() ){
    el = el.parentNode;
    }
    return (nn == el.nodeName.toLowerCase())? el : null;
    }

    function toggleVis(el)
    {
    // x introduced to prevent wrapping
    var x = el.style;
    x.visibility = ('hidden' == x.visibility)? 'visible' : 'hidden';
    }

    </script>
    </head>
    <body>
    <ul>
    <li><span id="topButton">LTOP_Button</span>
    <ul>
    <li>sub_button_1</li>
    <li>sub_button_2</li>
    </ul>
    </li>
    </ul>

    <script type="text/javascript">
    initList('topButton');
    </script>

    </body>
    </html>


    initList could be assigned to the body onload event, however if the
    document is large and takes some time to load, the list of buttons might
    be displayed for a short time before being hidden.

    Putting it where it is means it will run as soon as the relevant
    elements have been created. You may also want to look at the CSS
    display property which can be toggled between 'none' and '' to hide and
    show elements respectively.



    --
    Rob
    RobG, Jan 11, 2006
    #5
  6. john_woo

    john_woo Guest

    I got it:

    <form>
    <input type="button" value="big" onclick="showHide();" />
    <input type="button" value="sub_1" id="b1" />
    <input type="button" value="sub_2" id="b2" />
    </form>

    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showHide() {
    if (document.getElementById('b1').style.visibility != "hidden")
    {
    document.getElementById('b1').style.visibility = "hidden";
    document.getElementById('b2').style.visibility = "hidden";
    }
    else {
    document.getElementById('b1').style.visibility = "visible";
    document.getElementById('b2').style.visibility = "visible";
    }
    }
    //-->
    </SCRIPT>

    but still wondering whether it works in all browsers.
    john_woo, Jan 11, 2006
    #6
  7. john_woo wrote:

    > I got it:


    No, you don't.

    > <form>


    `form' elements require the `action' attribute.

    > <input type="button" value="big" onclick="showHide();" />

    ^
    IE does not support XHTML. Declare HTML; omit the "/", you do not
    need it and it is potentially harmful if you include it in HTML as
    `<foo />' is equivalent to `<foo>&gt;' there.

    Should be

    <input type="button" value="big" onclick="showHide(this);">

    > <input type="button" value="sub_1" id="b1" />
    > <input type="button" value="sub_2" id="b2" />
    > </form>
    >
    > <SCRIPT LANGUAGE="JavaScript">
    > <!--


    That is utter nonsense, search the archives. Should be

    <script type="text/javascript">

    > function showHide() {
    > if (document.getElementById('b1').style.visibility != "hidden")
    > {
    > document.getElementById('b1').style.visibility = "hidden";
    > document.getElementById('b2').style.visibility = "hidden";
    > }
    > else {
    > document.getElementById('b1').style.visibility = "visible";
    > document.getElementById('b2').style.visibility = "visible";
    > }
    > }


    That is nonsense as well. Should be at least

    function showHide(o)
    {
    var b1 = o.form.elements['b1'];
    var b2 = o.form.elements['b2'];

    if (b1 && typeof b1.style != "undefined" && b2)
    {
    var b = (b1.style.visibility != "hidden");
    b1.style.visibility = b ? "hidden" : "visible";
    b2.style.visibility = b ? "hidden" : "visible";
    }
    }

    > //-->


    Unnecessary.

    > </SCRIPT>
    >
    > but still wondering whether it works in all browsers.


    It does not, but the corrected version at least should not break.


    PointedEars
    Thomas 'PointedEars' Lahn, Jan 11, 2006
    #7
  8. john_woo

    john_woo Guest

    Thanks lots for the correction.

    Can u tell what's the right idea to implement a javascript function to
    achive such goal and make it work over various browsers?

    --
    John
    Toronto
    john_woo, Jan 11, 2006
    #8
  9. john_woo wrote:

    > Thanks lots for the correction.


    You're welcome.

    > Can u tell what's the right idea to implement a javascript function to
    > achive such goal and make it work over various browsers?


    Pardon? I just did.

    > --
    > [...]


    If that should be a signature, it has to be separated with dashDashSPACE.
    I am not sure if Google Groups is capable of leaving the trailing space
    alone.


    PointedEars
    Thomas 'PointedEars' Lahn, Jan 11, 2006
    #9
  10. john_woo

    Guest

    <i>hidden</i> was a typo, oops.
    , Jan 13, 2006
    #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. Tee
    Replies:
    2
    Views:
    809
  2. vivek
    Replies:
    2
    Views:
    6,220
    pushp
    Jun 14, 2007
  3. steven robinson

    How can I hide button border on AWT Button?

    steven robinson, Nov 6, 2003, in forum: Java
    Replies:
    0
    Views:
    944
    steven robinson
    Nov 6, 2003
  4. Ben
    Replies:
    2
    Views:
    877
  5. Lawrence D'Oliveiro

    Death To Sub-Sub-Sub-Directories!

    Lawrence D'Oliveiro, May 5, 2011, in forum: Java
    Replies:
    92
    Views:
    2,015
    Lawrence D'Oliveiro
    May 20, 2011
Loading...

Share This Page