Help needed for a expand-collapse menu

R

Rabel

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">&nbsp;</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
 
R

Rabel

David said:
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.className.search('menu') > -1) {
var ul = divs.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).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
Click to expand...



Thanks David but I tried to create the graphic part I was talking about
for your code and couldnt do that could you add that code for me.

I wanted to add a graphic that is a "+" then a "-" when clicked on to
expand and collapse
 
A

ASM

Rabel a écrit :
anybody else have any ideas on how to make this work

Thanks
Click to expand...

Any other idea exept to use lists (ul -> li -> ul -> li)
The history about [+] or [-] is very easy to fix.

example :

you make an image with [+][-]
both together side to side (size of each sign = 24/16px)

<html>
<style type="text/css">
#menu { list-style: none; width: 120px; margin:0;padding:0; }
#menu li, #menu ul { margin: 0; padding: 0; }
#menu li { background: url(image_on_off.gif) no-repeat -24px top;}
#menu a { display: block; margin: 2px; margin-left: 26px;
background: #ffc; height: 20px;}
#menu li ul li { background-image: none; }
/* background image in slide doors */
#menu .hide { background-position: left top; }
#menu .hide ul { display: none; }
</style>
<script type="text/javascript">

function showHide(what) {
what.className = what.className==''? 'hide' : '';
}

function init() {
var M = document.getElementById('menu');
M = M.getElementsByTagName('li');
for(var i=0; i<M.length; i++)
if(M.getElementsByTagName('ul').length>0) {
showHide(M);
M.onclick = function() { showHide(this); return false;}
}
}
onload = init;
</script>

<ul id="menu">
<li><a href="about.htm">About</a>
<ul>
<li><a href="me.htm">About me</a></li>
<li><a href="job.htm">My job</a></li>
</ul>
</li>
<li><a href="section_1/">Section 1</a>
<ul>
<li><a href="section_1/1.htm">Intro</a></li>
<li><a href="section_1/2.htm">History</a></li>
</ul>
</li>
</ul>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Nested Loop Insert Page Break 1
Help needed with thank you message 5
Help with code 0
Angularjs newbie - second JSON datasource does not display 0
Help with my responsive home page 2
How can I get my menu inside of a menu to function properly? 1
Newbie expand/collapsible menu problem 6

Members online

Total: 30 (members: 3, guests: 27)
Robots: 378

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,016
Latest member
TatianaCha

Latest Threads

Top