Forum Moderators: open
I have a page that has four buttons. Each button is an image. They are stacked on top of each other. I need to make it so when each button is clicked, more buttons appear below the one click, so basically subbuttons. I don't want the page to change though. I don't want it to be a mouseover effect, I just want it to be on a click basis.
I usually do things like this with CSS but I don't think it is possible. How would I go about doing this with Javascript? Would I be using the getElementByID to hide and show the buttons depending on which one was clicked?
Thanks in advance for your help!
Wes
I have a page that has four buttons. Each button is an image. They are stacked on top of each other. I need to make it so when each button is clicked, more buttons appear below the one click, so basically subbuttons.
This sounds like a heirarchy that would be ideally represented using nested lists. Also, are these buttons actually <a> elements containing images?
You should do this using progressive enhancement so that all of the buttons are visible the the user has JavaScript disabled.
Essentially, attach a click handler to the buttons in the top level list. When clicked, all of the divs in the list would be given a style that hides them, and then the <div> sibling of the button could be assigned a class which shows it. So you'd still be using some CSS.
I would highly recommend using the Yahoo UI Library's DOM and Event Utilities for some of this. I threw together this quick example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Example</title>
<style type="text/css">
#buttonList,
#buttonList ul { list-style: none; }
.inactiveButtons { display: none; }
.activeButtons { display: block; }
</style>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript">
YAHOO.util.Event.on(window, 'load', function () {
// Hide all of the nested buttons
var subDivList = YAHOO.util.Dom.getElementsBy(function (el) {
// For this, we'll assume there is only one level of div elements
return true;
}, 'div', 'buttonList');
YAHOO.util.Dom.replaceClass(subDivList, 'activeButtons', 'inactiveButtons');
// Get the top level buttons
var topLevelButtons = YAHOO.util.Dom.getElementsBy(function (el) {
var buttonList = document.getElementById('buttonList');
// Return true if this node's grandparent is the buttonList
return el.parentNode.parentNode == buttonList;
}, 'a', 'buttonList' );
// Walk through the list of buttons
for (var i = 0; i < topLevelButtons.length; i++) {
// Attach the click handler
YAHOO.util.Event.on(topLevelButtons[i], 'click', function (e) {
YAHOO.util.Event.stopEvent(e);
// Hide all sub divs
var subDivList = YAHOO.util.Dom.getElementsBy(function (el) {
// For this, we'll assume there is only one level of div elements
return true;
}, 'div', 'buttonList');
for (var j = 0; j < subDivList.length; j++) {
// Hide all of the divs
YAHOO.util.Dom.replaceClass(subDivList[j], 'activeButtons', 'inactiveButtons');
}
// Show the sibling of this button
var activeDiv = YAHOO.util.Dom.getElementsBy(function (el) {return true;}, 'div', this.parentNode);
YAHOO.util.Dom.replaceClass(activeDiv, 'inactiveButtons', 'activeButtons');
});
}
});
</script>
</head>
<body>
<form action="">
<div>
<ul id="buttonList">
<li>
<a href="#group1"><img src="group1.gif" alt="Group 1" title="Group 1"></a>
<div id="group1">
<ul>
<li>1. button</li>
<li>2. button</li>
<li>3. button</li>
</ul>
</div>
</li>
<li>
<a href="#group2"><img src="group2.gif" alt="Group 2" title="Group 2"></a>
<div id="group2">
<ul>
<li>4. button</li>
<li>5. button</li>
<li>6. button</li>
</ul>
</div>
</li>
</ul>
</div>
</form>
</body>
</html>
I guess it would work if I called it locally right?
Thanks again for your help! :)
