Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Show and Hide elements in an ul

    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:
    Code:
    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:
    Code:
    <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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well first your HTML is wrong. ULs can't go directly in another UL. They need to go in an LI.
    Code:
    <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.
    Code:
    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
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    if (cycleMenuItems.id != null) {
    to this:
    Code:
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •