SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)

    Definition List Expand/Collapse Script V 2.0

    Hello all.

    I'm trying to make an Expand and Collapse navigation menu, based on a Definition List.

    I made one before but it was very tangled and difficult to re-use. Recently (as in a minute ago) I learned how to confine the events related to a specific tag into the head of my webpage (see this thread) so I'm trying to incorporate all that sleekness into the new version of my script.

    Of course I'm stuck...
    :P

    Here's what I've done so far...

    Code:
    <head>
    	<script type="text/javascript">
    		function closeECList(dtElm)
    			{
    			alert(dtElm);
    			if(dtElm.nextSibling.nodeType != 1)
    				{
    				dtElm.nextSibling.style.display='none';
    				}
    			else
    				{
    				alert('The Next Node was Not an Element');
    				}
    			}
    
    		function toggleECList()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			j=arrayReturn.length;
    
    			for(i=0; i<j; i++)
    				{
    				var arraySelect=arrayReturn[i];
    				arraySelect.onclick=function() {alert(arraySelect); closeECList(arraySelect); this.style.fontWeight='bold';}
    				}
    			}
    		window.onload=toggleECList;
    	</script>
    </head>
    
    <body>
    	<dl>
    		<dt>Click Here</dt>
    		<dd>Item One</dd>
    		<dd>Item Two</dd>
    
    		<dt><a href="#">Click Here</a></dt>
    		<dd>Item Three</dd>
    		<dd>Item Four</dd>
    	</dl>
    </body>
    (If you copy and paste that into an empty html page you'll have my document)

    The area that's giving me trouble is highlighted in red. I keep getting "dtElm.nextSibling.style has no properties".

    Where do you think my mistake lies?? Am I using that .nextSibling thingy wrong??




    http://www.sitepoint.com/forums/show...lementsbyclass
    http://www.sitepoint.com/forums/showthread.php?t=428444

  2. #2
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I think you want the condition to be:
    Code:
    if( dtElm.nextSibling.nodeType == 1)
    In other words, you need an element node.

    However, in FF the next node to the clicked element will be text node, i.e. the new line symbol. In order for it to work, you must keep the elements in one line:
    HTML Code:
    <dt><a href="#">Click Here</a></dt><dd>Item Three</dd>
    Saul

  3. #3
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hey!!... Hello, php_demon.

    You were right on both accounts, thanks.

    Here's the thing, though. Even though the next sibling of the clicked <dt> should be the the <dd> in the next line, for some odd reason it always seems to be the first <dd> in the last <dt> that gets selected... no matter which <dt> is clicked.

    (Yeah I know that sounds confusing, but try it and you'll get what I mean.)

    See below...

    Code:
    <head>
    	<script type="text/javascript">
    		function closeECList(dtElm)
    			{
    			if(dtElm.nextSibling.nodeType == 1)
    				{
    				dtElm.nextSibling.style.display='none';
    				}
    			else
    				{
    				alert('The Next Node was Not an Element');
    				}
    			}
    
    		function toggleECList()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			j=arrayReturn.length;
    
    			for(i=0; i<j; i++)
    				{
    				var arraySelect=arrayReturn[i];
    				arraySelect.onclick=function() {closeECList(arraySelect); this.style.fontWeight='bold';}
    				}
    			}
    		window.onload=toggleECList;
    	</script>
    </head>
    
    <body>
    	<dl>
    		<dt><a href="#">Click Here</a></dt><dd>Item One</dd><dd>Item Two</dd>
    
    		<dt><a href="#">Click Here</a></dt><dd>Item Three</dd><dd>Item Four</dd>
    
    		<dt><a href="#">Click Here</a></dt><dd>Item Five</dd><dd>Item Six</dd>
    	</dl>
    </body>
    ??

  4. #4
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yes, there's a little mistake:
    Code:
    arraySelect.onclick=function() {closeECList(this); this.style.fontWeight='bold';}
    Saul

  5. #5
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    grr... I'm painfully close to having it all figured out now...

    Code:
    <head>
    	<script type="text/javascript">
    		function closeECList(dtElm)
    			{
    			nextSib = dtElm.nextSibling;
    			while(nextSib == 'dd')
    				{
    				nextSib.style.display='none';
    				nextSib = nextSib.nextSibling;
    				}
    			}
    
    		function toggleECList()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			j=arrayReturn.length;
    
    			for(i=0; i<j; i++)
    				{
    				var arraySelect=arrayReturn[i];
    				arraySelect.onclick=function() {closeECList(this); this.style.fontWeight='bold';}
    				}
    			}
    		window.onload=toggleECList;
    	</script>
    </head>
    
    <body>
    	<dl>
    		<dt><a href="#">Click Here 1</a></dt><dd>Item One</dd><dd>Item Two</dd>
    
    		<dt><a href="#">Click Here 2</a></dt><dd>Item Three</dd><dd>Item Four</dd>
    
    		<dt><a href="#">Click Here 3</a></dt><dd>Item Five</dd><dd>Item Six</dd>
    
    		<dt><a href="#">Click Here 4</a></dt><dt><a href="#">Click Here 5</a></dt>
    
    		<dt><a href="#">Click Here 6</a></dt><dd>Item Seven</dd><dd>Item Eight</dd>
    	</dl>
    Right so I have a "toggle" function working, which activates the "close" function...

    The close function is meant to be pretty much a loop, that will continue from that point in the document where the <dt> element was clicked, hiding <dd> elements until it comes to another <dt> tag. That's the theory at least. In reality nothing happens at all.

    Okay I'm stuck again... any pointers, dudes??

  6. #6
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In this case you can use a recursion:
    Code:
    if(dtElm.nextSibling && dtElm.nextSibling.tagName == 'DD')
    	{
    		dtElm.nextSibling.style.display='none';
    		closeECList(dtElm.nextSibling);
    	}
    Note that I now limited it to DD tags, plus I added the check if dtElm.nextSibling is defined in case there is no nextSibling (the element is last).
    Saul

  7. #7
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Hey!!... I got it to work properly!!

    I'll post the completed script when I'm done.

    Thanks a lot, php_daemon.


    Off Topic:

    There I spelt it correctly... Don't think I'm making it a habbit, though... :P

  8. #8
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Sure, anytime.

    Yup, post it back, it's a great script. I don't get much time to play with js, so this script will be very handy.
    Saul

  9. #9
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    Voila

    I did two versions of it... The first is the "standard version"

    Code:
    <head>
    	<script type="text/javascript">
    	// SR Expand Collapse Script (Shaun Rambaran - scribblefactory.net)
    
    		function openECAll()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.fontWeight='bold';
    				}
    
    			var arrayReturn=document.getElementsByTagName('dd');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.display='block';
    				}
    			}
    
    		function closeECAll()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.fontWeight='normal';
    				}
    
    			var arrayReturn=document.getElementsByTagName('dd');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.display='none';
    				}
    			}
    
    		function openECList(dtElm)
    			{
    			if(dtElm.nextSibling && dtElm.nextSibling.tagName == 'DD')
    				{
    				dtElm.nextSibling.style.display='block';
    				openECList(dtElm.nextSibling);
    				}
    			}
    
    		function closeECList(dtElm)
    			{
    			if(dtElm.nextSibling && dtElm.nextSibling.tagName == 'DD')
    				{
    				dtElm.nextSibling.style.display='none';
    				closeECList(dtElm.nextSibling);
    				}
    			}
    
    		function toggleECList()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			j=arrayReturn.length;
    
    			for(i=0; i<j; i++)
    				{
    				var arraySelect=arrayReturn[i];
    				arraySelect.onclick=function()
    							{
    							if(this.nextSibling.tagName == 'DD' && this.nextSibling.style.display == 'none')
    								{
    								openECList(this);
    								this.style.fontWeight='bold';
    								}
    							else
    								{
    								closeECList(this);
    								this.style.fontWeight='normal';
    								}
    							return false;
    							}
    				}
    			}
    		window.onload=toggleECList;
    
    	// End SR Expand Collapse Script
    	</script>
    
    	<style type="text/css">
    		dt{font-weight:bold;}
    		dd{display:block;}
    	</style>
    </head>
    
    <body>
    	<dl>
    		<dt><a href="#">Click Here 1</a></dt><dd>Item One</dd><dd>Item Two</dd>
    
    		<dt><a href="#">Click Here 2</a></dt><dd>Item Three</dd><dd>Item Four</dd>
    
    		<dt><a href="#">Click Here 3</a></dt><dd>Item Five</dd><dd>Item Six</dd>
    
    		<dt><a href="#">Click Here 4</a></dt><dd>Item Seven</dd><dd>Item Eight</dd>
    	</dl>
    
    	<a href="javascript:closeECAll();">Close All</a>
    	<br />
    	<a href="javascript:openECAll();">Open All</a>
    </body>
    and then I also did the "One Open" Version, in which all the other lists collapse when one is opened...

    Code:
    <head>
    	<script type="text/javascript">
    	// SR Expand Collapse Script (Shaun Rambaran - scribblefactory.net)
    
    		function openECAll()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.fontWeight='bold';
    				}
    
    			var arrayReturn=document.getElementsByTagName('dd');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.display='block';
    				}
    			}
    
    		function closeECAll()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.fontWeight='normal';
    				}
    
    			var arrayReturn=document.getElementsByTagName('dd');
    			J=arrayReturn.length;
    
    			for(I=0; I<J; I++)
    				{
    				var arraySelect=arrayReturn[I];
    				arraySelect.style.display='none';
    				}
    			}
    
    		function openECList(dtElm)
    			{
    			if(dtElm.nextSibling && dtElm.nextSibling.tagName == 'DD')
    				{
    				dtElm.nextSibling.style.display='block';
    				openECList(dtElm.nextSibling);
    				}
    			}
    
    		function closeECList(dtElm)
    			{
    			if(dtElm.nextSibling && dtElm.nextSibling.tagName == 'DD')
    				{
    				dtElm.nextSibling.style.display='none';
    				closeECList(dtElm.nextSibling);
    				}
    			}
    
    		function toggleECList()
    			{
    			var arrayReturn=document.getElementsByTagName('dt');
    			j=arrayReturn.length;
    
    			for(i=0; i<j; i++)
    				{
    				var arraySelect=arrayReturn[i];
    				arraySelect.onclick=function()
    							{
    							if(this.nextSibling.tagName == 'DD' && this.nextSibling.style.display == 'none')
    								{
    								closeECAll();
    								openECList(this);
    								this.style.fontWeight='bold';
    								}
    							else
    								{
    								closeECList(this);
    								this.style.fontWeight='normal';
    								}
    							return false;
    							}
    				}
    			}
    		window.onload=toggleECList;
    
    	// End SR Expand Collapse Script
    	</script>
    
    	<style type="text/css">
    		dt{font-weight:normal;}
    		dd{display:none;}
    	</style>
    </head>
    
    <body>
    	<dl>
    		<dt><a href="#">Click Here 1</a></dt><dd>Item One</dd><dd>Item Two</dd>
    
    		<dt><a href="#">Click Here 2</a></dt><dd>Item Three</dd><dd>Item Four</dd>
    
    		<dt><a href="#">Click Here 3</a></dt><dd>Item Five</dd><dd>Item Six</dd>
    
    		<dt><a href="#">Click Here 4</a></dt><dd>Item Seven</dd><dd>Item Eight</dd>
    	</dl>
    
    	<a href="javascript:closeECAll();">Close All</a>
    	<br />
    	<a href="javascript:openECAll();">Open All</a>
    </body>
    *bows*... Thank you... Thank you all... You're too kind !!

  10. #10
    ✯✯✯ silver trophybronze trophy php_daemon's Avatar
    Join Date
    Mar 2006
    Posts
    5,284
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for sharing
    Saul


Bookmarks

Posting Permissions

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