...

View Full Version : Show and Hide elements in an ul



FlipperBizkut
11-04-2006, 07:18 AM
Hi. I have some nested lists that I am trying to clean up. What I am wanting to do is to be able to click an item in the outermost list (the catagory), and have it show the appropriate inner list (the subcatagory). I have it working in FireFox, but IE is not working.

Here is my js:


function switchView(id) {
makeHidden(id);
showElement(id);
}

function makeHidden(id) {
var menu = document.getElementById('menu');
var menuSubLists = menu.getElementsByTagName('ul');
for (var i = 0 ; i < menuSubLists.length; i++){
var cycleMenuSubLists = menu.getElementsByTagName('ul')[i];
if ((cycleMenuSubLists.getAttribute('id') != null) && (cycleMenuSubLists.getAttribute('id') != id)) {
hideElement(cycleMenuSubLists.getAttribute('id'));
}
}
}

function showElement(id) {
document.getElementById(id).style.display = document.getElementById(id).style.display == 'block' ? 'none' : 'block';
}

function hideElement(id) {
document.getElementById(id).style.display = 'none';
}

function switchLinks() {
if (document.getElementById) {
var menu = document.getElementById('menu');
var menuItems = menu.getElementsByTagName('a');
for (var i = 0; i < menuItems.length; i++) {
var cycleMenuItems = menu.getElementsByTagName('a')[i];
if (cycleMenuItems.getAttribute('id') != null) {
cycleMenuItems.setAttribute('href', "javascript:switchView('" + cycleMenuItems.getAttribute('id') + "_sub');")
}
}
}
}

window.onload = switchLinks


The list looks something like this, but ultimately is dynamically created:


<ul id="menu">
<li><a id="one" href="#">One</a></li>
<ul id="one_sub">
<li><a href="1.htm">1</a></li>
<li><a href="2.htm">2</a></li>
<li><a href="3.htm">3</a></li>
<li><a href="4.htm">4</a></li>
<li><a href="5.htm">5</a></li>
<li><a href="6.htm">6</a></li>
</ul>
<li><a id="two" href="#">Two</a></li>
<ul id="two_sub">
<li><a href="1_2.htm">1</a></li>
<li><a href="2_2.htm">2</a></li>
</ul>
<li><a id="three" href="#">Three</a></li>
<ul id="three_sub">
<li><a href="1_3.htm">1</a></li>
<li><a href="2_3.htm">2</a></li>
</ul>
</ul>


Like I said, FireFox is working properly. What IE is doing is changing the inner lists (the subcatagories) to "javascript:switchView('_sub')". Since they have no "id", I thought the line: "if (cycleMenuItems.getAttribute('id') != null)" would alleviate the switching. It does in FireFox, but not in IE.

By the way, I have id's one_sub, two_sub, and three_sub set to "display: none" in my CSS.

Could you please help me?

Thanks.

_Aerospace_Eng_
11-04-2006, 07:40 AM
Well first your HTML is wrong. ULs can't go directly in another UL. They need to go in an LI.

<ul id="menu">
<li><a id="one" href="#">One</a>
<ul id="one_sub">
<li><a href="1.htm">1</a></li>
<li><a href="2.htm">2</a></li>
<li><a href="3.htm">3</a></li>
<li><a href="4.htm">4</a></li>
<li><a href="5.htm">5</a></li>
<li><a href="6.htm">6</a></li>
</ul>
</li>
<li><a id="two" href="#">Two</a>
<ul id="two_sub">
<li><a href="1_2.htm">1</a></li>
<li><a href="2_2.htm">2</a></li>
</ul>
</li>
<li><a id="three" href="#">Three</a>
<ul id="three_sub">
<li><a href="1_3.htm">1</a></li>
<li><a href="2_3.htm">2</a></li>
</ul>
</li>
</ul>
Then as for it not working in IE, getAttribute doesn't work on some attributes in IE6. You need to use the dom 1 method.

function switchView(id) {
makeHidden(id);
showElement(id);
}

function makeHidden(id) {
var menu = document.getElementById('menu');
var menuSubLists = menu.getElementsByTagName('ul');
for (var i = 0 ; i < menuSubLists.length; i++){
var cycleMenuSubLists = menu.getElementsByTagName('ul')[i];
if ((cycleMenuSubLists.id != null) && (cycleMenuSubLists.id != id)) {
hideElement(cycleMenuSubLists.id);
}
}
}

function showElement(id) {
document.getElementById(id).style.display = document.getElementById(id).style.display == 'block' ? 'none' : 'block';
}

function hideElement(id) {
document.getElementById(id).style.display = 'none';
}

function switchLinks() {
if (document.getElementById) {
var menu = document.getElementById('menu');
var menuItems = menu.getElementsByTagName('a');
for (var i = 0; i < menuItems.length; i++) {
var cycleMenuItems = menu.getElementsByTagName('a')[i];
if (cycleMenuItems.id != null) {
cycleMenuItems.setAttribute('href', "javascript:switchView('" + cycleMenuItems.id + "_sub');")
}
}
}
}

window.onload = switchLinks

FlipperBizkut
11-04-2006, 02:28 PM
Thanks for the reply. I have now fixed my HTML (I thought that inner uls had to be nested in lis, but wasn't sure). The javascript did not work though for some reason.

Figuring I would just play around with it a bit, I changed this line:


if (cycleMenuItems.id != null) {

to this:


if (cycleMenuItems.id != '') {

and now it works. If anyone knows why, I sure would like to know. I would have thought that null would have been correct since 'id' is not even defined in the HTML.

Thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum