Ok, first thing you want to do is scrap your HTML. You should be using
UL/LI's for this, not what you've got now. You should do your
formatting with CSS, not using <br /tags (which in the long run will
only make life more difficult).
Hope this helps:
<html>
<head>
<title></title>
<style>
..menu ul { display: none; list-style-type: none; padding-left: 0; }
..menu ul li { border: 1px solid gray; cursor: pointer; }
/* this doesn't work on IE6, but who cares about IE6 anymore? ;) */
..menu ul li:hover { background-color: #ffffdd; }
div.menu { float: left; width: 200px; }
</style>
<script>
// Convenient wrapper for document.getElementById (who want to type
that all the time?)
function $(id) {
return document.getElementById(id);
}
// Recursively search an element's parents for the first parent with a
given tag name
function getParentByTag(element, tag) {
if (!element || element.tagName == 'HTML') return null;
if (element.tagName == tag) return element;
return getParentByTag(element.parentElement || element.parentNode,
tag);
}
// Toggles the menu - this is the actual event handler
function toggleMenu(e) {
e = e || window.event;
var tgt = e.target || e.srcElement;
// Get the actual element we put this handler on
// Not always the same as the event target - usually a parent
var div = getParentByTag(tgt, 'DIV');
if (!div) return; // Fail silently
// Assuming, of course, you've only got one UL in your div
var ul = div.getElementsByTagName('UL')[0];
hideAllMenus();
if (ul.style.display == 'block') ul.style.display = 'none';
else ul.style.display = 'block';
if (e.stopPropogation) e.stopPropogation();
else if (e.cancelBubble) e.cancelBubble();
}
// Hide all the menus in divs with class "menu"
function hideAllMenus() {
var divs = document.getElementsByTagName('DIV');
for (var i=0; i<divs.length; i++) {
// Go through all divs in the document looking for className
containing
// (not ==! - there can be multiple classes) "menu"
if (divs[i].className.search('menu') -1) {
var ul = divs[i].getElementsByTagName('UL')[0];
ul.style.display = 'none';
}
}
}
// Make it happen in an onload handler
// Otherwise, this script gets executed before the DOM functions have a
document
window.onload = function() {
hideAllMenus();
var menuIds = ['menu1', 'menu2'];
for (var i=0; i<menuIds.length; i++) {
$(menuIds[i]).onclick = toggleMenu;
}
}
</script>
<body>
<div id="menu1" class="menu">
<h3>About</h3>
<ul>
<li>About me</li>
<li>More about me</li>
<li>Lots more about me</li>
</ul>
</div>
<div id="menu2" class="menu">
<h3>Stuff</h3>
<ul>
<li>What I do</li>
<li>Give me money</li>
</ul>
</div>
</body>
</html>
-David
Rabel wrote:
I am not very good at javascript I mostly am a flash developer but I am
trying to apply one of our old expanding menus to work for a new site
but it doesn't collapse the way I need it to right now the code I am
using looks like this
function openSubCategory(n, nn) {
var i = 0
for(i=1;i<n+1;i++) {
var sel = document.getElementById('insideSubCategory'+i);
sel.style.display = 'none';
}
var sel = document.getElementById('insideSubCategory'+nn);
sel.style.display = 'block';
}
then the code for the text that pops up once the button is clicked is
<div id="insideSubCategory1" style="border:1px; display:none;">
<div style="display:block; padding-left:3px;">
<table width="741" border="0">
<tr>
<td width="500" valign="top"><span
class="bodycopy"><b>Experience</b><br />
has eighteen years of planning and architectural experience. Since
joining </span></span><p><span class="bodycopy"><b>Education</b><br />
Master of City Planning<br />
University of Pennsylvania, Certificate of Urban
Design</span></p>
<p class="bodycopy"><b>Licenses</b><br />
Registered Architect, PA, NJ, MD, NCARB Certified</p>
</span></td>
<td width="231" valign="top"><table width="231" border="0"
bgcolor="#638BCF">
<tr>
<td width="125" bgcolor="#638BCF"><img src="Davirmann.jpg"
width="125" height="180" /></td>
<td width="96" bgcolor="#638BCF"> </td>
</tr>
</table></td>
</tr>
</table>
</div>
so I need help with the collapse part and this is how I would like to
do it - add a graphic that is a "+" then a "-" when clicked on to
expand and collapse - im not sure how to make that graphic change and
for the expand or collapse code to be run. Any help is apprieciated
Thanks
Randy
