943,840 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > Expand one div while collapsing ALL others, MY code SHOULD work.
Ad:
Permalink
Aug 22nd, 2008
0

Expand one div while collapsing ALL others, MY code SHOULD work.

Expand Post »
Hi thanks for looking.

It's quite straight forward really. As opposed to allowing all possible divs to be displayed I would like to make them all collapse and then only expand the one that the user clicked on. Simple right?

OK so here is my code right now, which allows them all to be displayed.

javascript Syntax (Toggle Plain Text)
  1.  
  2. function ShowHide(div){
  3.  
  4. 	if (document.getElementById(div).style.display == 'none' ){
  5. 		document.getElementById(div).style.display = 'block';	
  6. 	}
  7. 	else if ( document.getElementById(div).style.display == 'inline-block' ){
  8. 		document.getElementById(div).style.display = 'none';
  9. 	}
  10. 	else
  11. 	{
  12. 		document.getElementById(div).style.display = 'none';
  13. 	}
  14. }

However when I add the following function below the above one and call it instead it doesn't even expand the div tag.

javascript Syntax (Toggle Plain Text)
  1.  
  2. function toggleSlide(objname) {
  3. var f=2005;
  4. for (f=2005;f<=2025;f++)
  5. {
  6. 	document.getElementById(f).style.display = 'none';
  7. }
  8. 	ShowHide(objname);
  9. }

The f var is to cycle through all the id's. The id is generated by PHP on the server side. Then I simple call the first function that I know works by itself.

Any help at all is greatly appreciated.
Last edited by rickya100; Aug 22nd, 2008 at 10:10 am. Reason: Mistyped code
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008
Permalink
Aug 24th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

What does the Firefox Error Console say? Post a complete snippet which doesn't work so that we can try it in our browsers rather than posting chunks.
Last edited by ~s.o.s~; Aug 24th, 2008 at 1:37 am.
Super Moderator
Featured Poster
Reputation Points: 3233
Solved Threads: 719
Failure as a human
~s.o.s~ is offline Offline
8,871 posts
since Jun 2006
Permalink
Aug 24th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

Hi s.o.s,

My internet went down so has taken me a while to post back.

OK so here is the line of php that echos out the html with the javascript call.

php Syntax (Toggle Plain Text)
  1. echo '<h2><a href="javascript:;" onclick="toggleSlide(\''.$row['year'].'\');" title="See articles from '.$row['year'].' ">'.$row['year']."</a></h2>\n";

which outputs this

html Syntax (Toggle Plain Text)
  1. <h2><a href="javascript:;" onclick="toggleSlide('2007');" title="See articles from 2007 ">2007</a></h2>

And here is the javascript file that the call is made to

javascript Syntax (Toggle Plain Text)
  1. function ShowHide(div){
  2.  
  3. 	if (document.getElementById(div).style.display == 'none' ){
  4. 		document.getElementById(div).style.display = 'block';	
  5. 	}
  6. 	else if ( document.getElementById(div).style.display == 'inline-block' ){
  7. 		document.getElementById(div).style.display = 'none';
  8. 	}
  9. 	else
  10. 	{
  11. 		document.getElementById(div).style.display = 'none';
  12. 	}
  13. }
  14.  
  15.  
  16. function toggleSlide(objname) {
  17. var f=2005;
  18. for (f=2005;f<=2020;f++)
  19. {
  20. 	document.getElementById(f).style.display = 'none';
  21. }
  22. 	ShowHide(objname);
  23. }

The error that FireFox error console returns when I click on the link is

'Error: document.getElementById(f) is null
Source File: http://localhost/ATS/js_includes/show_hide.js
Line: 20'

I don't know why it's null as it is a simple for loop. Although I'm still getting used to javascript.


Again, thanks for any help.
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008
Permalink
Aug 24th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

It simply means that an element with an ID having the value contained in the variable 'f' at that point in time doesn't exist. Try alerting the value of 'f' inside the loop and search for an element with that ID in your markup. Like I said in my previous post, the way you are generating your markup holds the key to the problem.
Super Moderator
Featured Poster
Reputation Points: 3233
Solved Threads: 719
Failure as a human
~s.o.s~ is offline Offline
8,871 posts
since Jun 2006
Permalink
Aug 25th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

Hi,

I have tried to catch the point that var f is being assigned null and drop out of the loop then but i can't get it to drop out and then expand the div I want.

Here is my revised code

javascript Syntax (Toggle Plain Text)
  1. function toggleSlide(objname) {
  2. var f=2007;
  3. while (f != null)
  4. {
  5. 	document.getElementById(f).style.display = 'none';
  6. 	alert(f);
  7. 	f++;
  8. }
  9. 	ShowHide(objname);
  10. }

It is alerting out the value of each div - 2007 and 2008 - but then doesn't expand the div clicked on.

The html output is fine. So im not sure what is wrong.
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008
Permalink
Aug 25th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

Are you trying to do this?
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div {
  5.   display: none;
  6.   width: 200px;
  7.   height: 200px;
  8.   border: 1px solid indigo;
  9. }
  10. </style>
  11. <script type="text/javascript">
  12. window.onload = function () {
  13.   toggleSlide('2007');
  14. }
  15.  
  16. function toggleSlide ( id ) {
  17.   for ( var f = 2005; f <= 2020; f ++ ) {
  18.     if ( node = document.getElementById(f) ) {
  19.       if ( f == id ) {
  20.         node.style.display = 'block'; 
  21.       } else {
  22.         node.style.display = 'none';
  23.       }
  24.     }
  25.   }
  26. } 
  27. </script>
  28. </head>
  29. <body>
  30. <h2><a href="javascript:" onclick="toggleSlide('2007')" title="See articles from 2007">2007</a></h2>
  31. <h2><a href="javascript:" onclick="toggleSlide('2008')" title="See articles from 2008">2008</a></h2>
  32. <h2><a href="javascript:" onclick="toggleSlide('2009')" title="See articles from 2009">2009</a></h2>
  33. <div id="2007">2007</div>
  34. <div id="2008">2008</div>
  35. <div id="2009">2009</div>
  36. </body>
  37. </html>
Hope it helps
Last edited by langsor; Aug 25th, 2008 at 1:51 pm.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Aug 25th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

Many thanks langsor.

That is what I needed. I understand all of it apart form the need for the first if statement in the toggleSlide function.

If you have the time can you explain what what assigning a value to the node variable is for?


Richard
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008
Permalink
Aug 25th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

Click to Expand / Collapse  Quote originally posted by rickya100 ...
Many thanks langsor.

That is what I needed. I understand all of it apart form the need for the first if statement in the toggleSlide function.

If you have the time can you explain what what assigning a value to the node variable is for?


Richard
Hi Richard,
This line is shorthand and does two things at the same time
if ( node = document.getElementById(f) ) {

It assigns the value of document.getElementById(f) to the variable node which is then used later in the block (pre-assigning like this saves typing and processor cycles)

It also tests if node has a value of null (or any false value) by passing the value through from the assignment. This is better illustrated by example. So we know if we should attempt to change the style on this node without generating an error.

Example of above concept
javascript Syntax (Toggle Plain Text)
  1. <script type="text/javascript">
  2. var a = b = 'c';
  3. alert( a );       // produces 'c'
  4.  
  5. alert( b = 'c' ); // produces 'c'
  6. </script>

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. function toggleSlide ( id ) {
  2.   for ( var f = 2005; f <= 2020; f ++ ) {
  3.     if ( node = document.getElementById(f) ) {
  4.       if ( f == id ) {
  5.         node.style.display = 'block'; 
  6.       } else {
  7.         node.style.display = 'none';
  8.       }
  9.     }
  10.   }
  11. }

Does this all make sense?
Last edited by langsor; Aug 25th, 2008 at 5:19 pm.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008
Permalink
Aug 25th, 2008
0

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

Thanks for that,

I think I get it. It was really just the fact that the if statement is used to both test node (if it is null or not) and assign to it.

I'll be getting into javascript a lot more in the coming months so I'm sure I will have a true eureka moment at some time.


Again, many thanks.


Richard
Reputation Points: 10
Solved Threads: 1
Junior Poster in Training
rickya100 is offline Offline
78 posts
since Mar 2008
Permalink
Aug 25th, 2008
1

Re: Expand one div while collapsing ALL others, MY code SHOULD work.

You're welcome,

For what it's worth, some people discourage this approach stylistically since it can obscure code, but technically it's sound and I prefer it over the following two examples (when used in moderation).
javascript Syntax (Toggle Plain Text)
  1. function toggleSlide ( id ) {
  2.   for ( var f = 2005; f <= 2020; f ++ ) {
  3.     var node = document.getElementById(f);
  4.     if ( node ) {
  5.       if ( f == id ) {
  6.         node.style.display = 'block'; 
  7.       } else {
  8.         node.style.display = 'none';
  9.       }
  10.     }
  11.   }
  12. }
...or...
javascript Syntax (Toggle Plain Text)
  1. function toggleSlide ( id ) {
  2.   for ( var f = 2005; f <= 2020; f ++ ) {
  3.     if ( document.getElementById(f) ) {
  4.       if ( f == id ) {
  5.          document.getElementById(f).style.display = 'block'; 
  6.       } else {
  7.          document.getElementById(f).style.display = 'none';
  8.       }
  9.     }
  10.   }
  11. }
...but that's personal preference really
Last edited by langsor; Aug 25th, 2008 at 5:46 pm.
Reputation Points: 30
Solved Threads: 36
Posting Whiz
langsor is offline Offline
389 posts
since Aug 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: change <ul> id
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Text with thumbnail





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC