By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,109 Members | 993 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,109 IT Pros & Developers. It's quick & easy.

how to expand and hide sub-button

P: n/a
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

Jan 10 '06 #1
Share this Question
Share on Google+
9 Replies


P: n/a
john_woo escreveu:
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.


http://www.google.com.br/search?q=show+hide+javascript :)
--
Jonas Raoni Soares Silva
http://www.jsfromhell.com

Jan 10 '06 #2

P: n/a
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 '06 #3

P: n/a
ph*******@gmail.com 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.ht...def-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
Jan 11 '06 #4

P: n/a
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-q...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
Jan 11 '06 #5

P: n/a
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.

Jan 11 '06 #6

P: n/a
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
Jan 11 '06 #7

P: n/a
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

Jan 11 '06 #8

P: n/a
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
Jan 11 '06 #9

P: n/a
<i>hidden</i> was a typo, oops.

Jan 13 '06 #10

This discussion thread is closed

Replies have been disabled for this discussion.