473,322 Members | 1,494 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Help needed for a expand-collapse menu

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

Nov 3 '06 #1
4 8321
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">&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
Nov 3 '06 #2

David Golightly wrote:
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

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

Nov 6 '06 #3
anybody else have any ideas on how to make this work

Thanks

Nov 14 '06 #4
ASM
Rabel a écrit :
anybody else have any ideas on how to make this work

Thanks
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[i].getElementsByTagName('ul').length>0) {
showHide(M[i]);
M[i].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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 15 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Pekka Niiranen | last post by:
Hi there, after reading TkInter/thread -recipe: http://aspn.activestate.com/ASPN/Cookbook/Python/Recipe/82965 I wondered if it was possible to avoid using threads for the following problem: ...
1
by: Hafeez | last post by:
I am having real trouble compiling this code http://www.cs.wisc.edu/~vganti/birchcode/codeHier/AttrProj.tgz The attachment shows errors when compiled using the current version of g++ in a...
5
by: Dr. Ann Huxtable | last post by:
Hello All, I am reading a CSV (comma seperated value) file into a 2D array. I want to be able to sort multiple columns (ala Excel), so I know for starters, I cant be using the array, I need...
4
by: Patrick.O.Ige | last post by:
Hi All, Can anybody help in converting the code below to VB.NEt thanks. I need the loop converted.. thanks Private Sub expandCollapseAllTreeviewNodes(ByVal nodes As TreeNodeCollection, ByVal...
2
by: clsmith66 | last post by:
In a treeview, I am trying to store the index of every treenode as it expands in a hidden input box. If I click on the node itself, it expands and I can capture the node index no problem. If I...
8
by: rh0dium | last post by:
Hi all, I am using python to drive another tool using pexpect. The values which I get back I would like to automatically put into a list if there is more than one return value. They provide me...
10
by: Lebowski | last post by:
Problem i have records like these: name quantity quality A 5 2.5 B 4 1 B 3 2 C 1 1.5 .... ... ...
7
by: Lazareth | last post by:
Hi. Please help. Still learning... I am trying to write some code that will assign certain values to a variable based on values from a textbox. So far I have the following but It doesn't...
1
by: cbradio | last post by:
thescripts gurus, I would like to know if I could get some help with making elements of my layout expand (liquid) to the size of their containers, but also allow for some predefined, static...
1
by: GolfinRover | last post by:
Using the Newton-Raphson method, find the two roots of the equation 3x^2 + 2x -2=0. (Hint: There is one positive root and one negative root.) (x+1) = x - (3x^2 +2x -2) / (6x +2) This is the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.