Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Collapseable/Expandable Vertical Menus

Status
Not open for further replies.
dethanb

dethanb

MIS
Dec 30, 2007
3
US
G'Day All,

I'm new to the forum, and I'm new to Javascript but I have been using ASP for years. It's about time I took the plunge into Javascripting....

What I'm trying to do is create a vertical menu (standard left column html menu) to where a user clicks on a link/item and it expands a sub-menu below it. Easy to do using the following:

<html>

<head>
<script type="text/javascript">
function getItem(id)
{
var itm = false;
if(document.getElementById)
itm = document.getElementById(id);
else if(document.all)
itm = document.all[id];
else if(document.layers)
itm = document.layers[id];

return itm;
}

function toggleItem(id)
{
itm = getItem(id);

if(!itm)
return false;

if(itm.style.display == 'none')
itm.style.display = '';
else
itm.style.display = 'none';

return false;
}
</script>
</head>

<body>
<a href="#" onclick="toggleItem('table01')">LINK 01</a><br>
<table style="display:none; border-collapse: collapse" id="table01">
<tr>
<td>&nbsp;&nbsp;&nbsp;<a href="#">SUB LINK 01</a></td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;<a href="#">SUB LINK 02</a></td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;<a href="#">SUB LINK 03</a></td>
</tr>
</table>
<a href="#" onclick="toggleItem('table02')">LINK 02</a><br>
<table style="display:none; border-collapse: collapse" id="table02">
<tr>
<td>&nbsp;&nbsp;&nbsp;<a href="#">SUB LINK 01</a></td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;<a href="#">SUB LINK 02</a></td>
</tr>
<tr>
<td>&nbsp;&nbsp;&nbsp;<a href="#">SUB LINK 03</a></td>
</tr>
</table>
</body>
</html>

With this setup, if you click on Link 01 it expands the table just fine. Click on it again and it collapses, exactly what I want it to do.

If you click on Link 01, it expands, but it click on Link 02, Link 01 remains open, and Link 02 Opens as well. I'd like Link 01 to close when Link 02 is clicked, and visa versa (no matter how may links and collapsable tables are on the page).

Lastly, I'd like the current selection to be passed on to the next page when loaded so the menu remains the same until the user changes the menu. I'd also like to do this without using frames if possible.

Any help? Remember, I'm a beginner so comments in the script explaining what is occuring would be greatly appreciated!!!!

Much thanks to anyone who helps!
DethanB
 
Sort by date Sort by votes
Hey, I modified your code a little bit but I think this should have the effect your looking for.
var curMenuOpen; // holds the currently open menu item

function getItem(id)
{
var itm = false;
if(document.getElementById)
itm = document.getElementById(id);
else if(document.all)
itm = document.all[id];
else if(document.layers)
itm = document.layers[id];

return itm;
}

function toggleItem(id)
{
itm = getItem(id);

if(!itm)
return false;

/* If menu item selected is current one open, then close it */
if (curMenuOpen == itm) {
itm.style.display = 'none';
curMenuOpen = '';
} else { // They selected a different menu item or there is no current menu open
if (curMenuOpen) // If theres a current menu open, then close it
curMenuOpen.style.display = 'none';
itm.style.display = ''; // Open up the menu selected
curMenuOpen = itm; // Set the current menu open to the one just opened
}

return false;
}

As far as remembering it across multiple pages, you should look into setting and getting cookies. They're are multiple solutions but may be one of the easier ones.
 
Upvote 0 Downvote
That seems to work just fine. Thank You...

In ASP there is a way to carry information across webpages by using a Session Object. Is there a similar way to do is in Javascripting?
 
Upvote 0 Downvote
Cookies. If you Google "Javascript cookies" you'll find some examples of working that should fit your needs.

Lee
 
Upvote 0 Downvote
Yeah, I figured that was the only way, but thought I'd ask just to be sure.

Thank you...
 
Upvote 0 Downvote
I have a question...Why do you need to click on a link twice before it toggles the first time?
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
486
nanbread
nanbread
impeachme
  • Locked
  • Question
expandable tables that are closed by default (before onload)
Replies
1
Views
87
vacunita
vacunita
arbo80
  • Locked
  • Question
Drop Down menus work in IE 7 and Firefox but don't work in IE 6
Replies
0
Views
43
arbo80
arbo80
electricphp
  • Locked
  • Question
problem with DHTML menus in IE
Replies
0
Views
39
electricphp
electricphp
cool4cools
  • Locked
  • Question
smart vertical scroll menu
Replies
1
Views
34
johnwm
johnwm

Part and Inventory Search

Sponsor

Back
Top