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 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts

    problem hiding all <dd>s of <dl class="submenu"> on load

    http://sethrasmussen.com/lyndale/dandelion/

    In the sidebar, I've got submenus that are contained within nested <dl>s. These <dl>s are marked with the class "submenu".

    I have this code to loop over all <dl>s, grab the ones with the appropriate class, and hide their <dd> offspring when the page loads:

    Code:
    function initSidebarSubs() {
    	var dls = document.getElementsByTagName("dl");
    	for (i=0;i<dls.length;i++) {
    		if (dls[i].className=="submenu") {
    			var kids = dls[i].childNodes;
    			for (i=0;i<kids.length;i++) {
    				if (kids[i].nodeName=="DD") {
    					kids[i].style.display = "none";
    				}
    			}
    		}
    	}
    }
    It works for the first <dl class="submenu"> on the page, but not the second one.

    ***

    This is quite another issue entirely, but I am also trying to figure out how to do the main navigation submenus without inline event handlers, but I am not groking the other methods for doing such a thing for some reason. Can anybody point me to some good resources? Perhaps an example of what I'm trying to accomplish?

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    hide all dd elements
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>45701</title>
    		<!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]-->
    	</head>
    	<body>
    		<dl class="submenu">
    			<dt>dt</dt>
    			<dd>dd</dd>
    		</dl>
    		<dl class="submenu">
    			<dt>dt</dt>
    			<dd>dd</dd>
    		</dl>
    	</body>
    	<script type="text/javascript">
    		var list = document.getElementsByTagName('dl');
    		for(var i = 0; i < list.length; i++)
    		{
    			if(list[i].className != 'submenu')
    			{
    				continue;
    			}
    			var temp = list[i].getElementsByTagName('dd');
    			for(var j = 0; j < temp.length; j++)
    			{
    				temp[j].style.display = 'none';
    			}
    		}
    	</script>
    </html>
    use classes to toggle visibility on click
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>45701</title>
    		<!--[if IE]><script type="text/javascript">var ie = true;</script><![endif]-->
    		<style type="text/css">
    			.sub_closed dd	{
    				display:none;
    			}
    			.sub_open dd	{
    				display:block;
    			}
    		</style>
    	</head>
    	<body>
    		<dl>
    			<dt>dt</dt>
    			<dd>dd</dd>
    		</dl>
    	</body>
    	<script type="text/javascript">
    		var list = document.getElementsByTagName('dl');
    		for(var i = 0; i < list.length; i++)
    		{
    			list[i].className = 'sub_closed';
    			if(window.ie)
    			{
    				list[i].onclick = toggle;
    			}
    			else
    			{
    				list[i].addEventListener('click',toggle,true);
    			}
    		}
    
    		function toggle(e)
    		{
    			var el = (window.ie) ? this : e.currentTarget;
    			el.className = (el.className == 'sub_closed') ? 'sub_open' : 'sub_closed';
    		}
    	</script>
    </html>

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll look at those, but it'd be helpful if you could explain why my solution isn't working. If it's unsound code, that's one thing, but if it's not, I'd rather investigate why it doesn't work first.

  • #4
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Your example using getElementsByTagName("dd") within' the appropriate dl got me in the right direction. I simply changed my existing function to this:

    Code:
    function initSidebarSubs() {
    	var dls = document.getElementsByTagName("dl");
    	for (i=0;i<dls.length;i++) {
    		if (dls[i].className=="submenu") {
    			var dds = dls[i].getElementsByTagName("dd");
                            for(j=0;j<dds.length;j++){dds[j].style.display="none";}
    		}
    	}
    }

  • #5
    Regular Coder
    Join Date
    Aug 2003
    Location
    Loughborough University
    Posts
    427
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The only problem with your original function was that you were using the variable i in both for loops.
    AMD Athlon "Barton" XP 3200+ (11*200.5MHz = 2.2GHz)
    BFG GeForce 6800 Ultra OC 256Mb
    3 * Kingston 256Mb PC3200 DDR400
    Seagate Barracuda 120Gb Ultra ATA-100 and Seagate Barracuda 160Gb, SATA-150


  •  

    Posting Permissions

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