Sun, 2005-05-29 08:07
On http://www.dynamicdrive.com I found a so called switch menu, where one can open and close menu items one at a time. When looking into it, there were two things which I felt were in need of improvement:
1- Only one menu item at a time can be opened; if another was open, it would be closed
2- It was a little heavy on the javascript.
An alternative is proposed here:
<html>
<head>
<style type="text/css">
.menuCategory {
font-weight: bold;
background-color: #F2F3F5;
color: #036;
padding: 2px;
/*/*/border-top: 1px dashed #99ADC2;/* */
/*/*/margin-top: 1px;/* */
}
</style>
<script language="JavaScript" type="text/javascript">
function toggle(obj) {
with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>
</head>
<body>
<a href="javascript:toggle('menu_1')"><div class='menuCategory'>menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>
<a href="javascript:toggle('menu_2')"><div class='menuCategory'>menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>
</body>
</html>
I left the class menuTopic intact for those who want to add styling to the content.
The 1px margin is there for less cramped viewing when one has lots of menu items stacked.
Hope this helps
Tech
Sun, 2005-05-29 10:16
#1
A switch menu example
Hi
I've been looking for an opportunity to use this type of gadget for a while now and your code looks very compact and neat.
I came across this other version a while back, could you have a look and see if there are any advantages/disadvantages in comparison to your version - the script on this one is certainly a lot longer.
http://www.thebownes.com/dennis/playground/dhtml/hide-show-div-onClick.html
Sun, 2005-05-29 11:24
#2
A switch menu example
It does work, even with a doctype and valid code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html>
<head>
<style type="text/css">
<!--
.menuCategory {
font-weight: bold;
background-color: #F2F3F5;
color: #036;
padding: 2px;
/*/*/border-top: 1px dashed #99ADC2;/* */
/*/*/margin-top: 1px;/* */
}
-->
</style>
<script language="JavaScript" type="text/javascript">
function toggle(obj) {
with (document.getElementById(obj).style) { display = (display == 'none') ? 'block' : 'none'; }
}
</script>
</head>
<body>
<a href="javascript:toggle('menu_1')"><div class="menuCategory">menu item 1</div></a>
<div id='menu_1'><div class='menuTopic'>content to menu item 1</div></div>
<a href="javascript:toggle('menu_2')"><div class="menuCategory">menu item 2</div></a>
<div id='menu_2'><div class='menuTopic'>content to menu item 2</div></div>
</body>
</html>
However, the validator dooesn't like divs inside anchor tags. Doh! 
Sun, 2005-05-29 11:29
#3
A switch menu example
HellsBells
Thanks for your post. Both our examples are DOM Level 1 compliant. Your example hinges on the visibility attribute being 'visible' or 'hidden', whereas mine changes the display attribute in Javascript from 'none' to 'block'.
I am not convinced that changing styling dynamically the way I have done is such a good idea in the context of future browser support, but it works. I've checked both examples in IE6, FF1 and Op7 and it works flawlessly.
Hope this helps
Tech
Sun, 2005-05-29 16:19
#4
A switch menu example
Thanks for the reply - I haven't used a lot of JS in the past - just styleswitchers and slide shows so I don't know alot about which technique is preferable etc - thanks for going to the trouble of testing both in different browsers.
I'll file it all away for future use...
Sun, 2005-05-29 18:06
#5
A switch menu example
tph
Thanks also for your response, and I guess that means that the lightblue area will not be clickable once the <a></a> tags are brought inside division menuCategory. So there's really a dilemma...
Best
Tech