bubbling clam shell menu problem [Archive]

allida77

02-05-2003, 05:14 PM

I have a multi level clamshell menu that I am creating dynamically. The problem is with the last element on the menu, (level3). WHen it is clicked it closes itself. THis is hard for me to explain so here is some code:

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
function toggleMenu(artblock) {
//get our elements from the page
var objartblock = document.getElementById(artblock).style;

//is the current article clicked displayed if so change its display to none so it remains hidden
if (objartblock.display == 'block'){
objartblock.display = 'none';
window.event.cancelBubble = true;
window.event.returnValue = false;
//else it is not visible so lets show it, also show a "-" sign so user knows article is expanded
} else {
objartblock.display = 'block';
window.event.cancelBubble = true;
window.event.returnValue = false;
}
}

</script>
</HEAD>

<BODY>
<div onClick="toggleMenu('SubCtgy54')" id='Ctgy54' class='level1'>Re-Surveys
<div id='SubCtgy54' style='margin-left:10%;display:none'>
<div onClick="toggleMenu('DocType136')" id='Ctgy136' class='level2'>Documents
<div id='DocType136' style='margin-left:10%;display:none'>
<div class='level3'>Assement (Sample)</div>
</div>
</div>
<div onClick="toggleMenu('DocType137')" id='Ctgy137' class='level2'>Photos
<div id='DocType137' style='margin-left:10%;display:none'>
<div class='level3'>Photos Outside</div>
<div class='level3'>Photos Inside</div>
</div>
</div>
<div onClick="toggleMenu('DocType138')" id='Ctgy138' class='level2'>Questionnaires
<div id='DocType138' style='margin-left:10%;display:none'>
<div class='level3'>Sample Questionnaire 1</div>
</div>
</div>
</BODY>
</HTML>

I am stuck because I am not sure of how to prevent the last element from collapsing when clicked. Thanks in advance for any tips.

beetle

02-05-2003, 05:45 PM

Hmm, I have a menu project that you may be interested in.

Lemme know
http://www.peterbailey.net/nm/

Mr J

02-05-2003, 05:46 PM

Add

onclick="event.cancelBubble = 'true'" to all the level3 menus

<div class='level3' onclick="event.cancelBubble = 'true'">

allida77

02-05-2003, 06:50 PM

Thanks MrJ.

Beetle I will check that out.