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

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.

function ShowHide(div){
		
	if (document.getElementById(div).style.display == 'none' ){
		document.getElementById(div).style.display = 'block';	
	}
	else if ( document.getElementById(div).style.display == 'inline-block' ){
		document.getElementById(div).style.display = 'none';
	}
	else
	{
		document.getElementById(div).style.display = 'none';
	}
}

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

function toggleSlide(objname) {
var f=2005;
for (f=2005;f<=2025;f++)
{
	document.getElementById(f).style.display = 'none';
}
	ShowHide(objname);
}

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.

rickya100

Junior Poster in Training

78 posts since Mar 2008

Reputation Points: 13

Solved Threads: 1

3 Years Ago

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.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 733

3 Years Ago

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.

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

which outputs this

<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

function ShowHide(div){
		
	if (document.getElementById(div).style.display == 'none' ){
		document.getElementById(div).style.display = 'block';	
	}
	else if ( document.getElementById(div).style.display == 'inline-block' ){
		document.getElementById(div).style.display = 'none';
	}
	else
	{
		document.getElementById(div).style.display = 'none';
	}
}


function toggleSlide(objname) {
var f=2005;
for (f=2005;f<=2020;f++)
{
	document.getElementById(f).style.display = 'none';
}
	ShowHide(objname);
}

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.

rickya100

Junior Poster in Training

78 posts since Mar 2008

Reputation Points: 13

Solved Threads: 1

3 Years Ago

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.

~s.o.s~

Failure as a human

Administrator

11,938 posts since Jun 2006

Reputation Points: 3,281

Solved Threads: 733

3 Years Ago

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

function toggleSlide(objname) {
var f=2007;
while (f != null)
{
	document.getElementById(f).style.display = 'none';
	alert(f);
	f++;
}
	ShowHide(objname);
}

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.

rickya100

Junior Poster in Training

78 posts since Mar 2008

Reputation Points: 13

Solved Threads: 1

3 Years Ago

Are you trying to do this?

<html>
<head>
<style type="text/css">
div {
  display: none;
  width: 200px;
  height: 200px;
  border: 1px solid indigo;
}
</style>
<script type="text/javascript">
window.onload = function () {
  toggleSlide('2007');
}

function toggleSlide ( id ) {
  for ( var f = 2005; f <= 2020; f ++ ) {
    if ( node = document.getElementById(f) ) {
      if ( f == id ) {
        node.style.display = 'block'; 
      } else {
        node.style.display = 'none';
      }
    }
  }
} 
</script>
</head>
<body>
<h2><a href="javascript:" onclick="toggleSlide('2007')" title="See articles from 2007">2007</a></h2>
<h2><a href="javascript:" onclick="toggleSlide('2008')" title="See articles from 2008">2008</a></h2>
<h2><a href="javascript:" onclick="toggleSlide('2009')" title="See articles from 2009">2009</a></h2>
<div id="2007">2007</div>
<div id="2008">2008</div>
<div id="2009">2009</div>
</body>
</html>

Hope it helps

langsor

Posting Whiz

390 posts since Aug 2008

Reputation Points: 30

Solved Threads: 36

3 Years Ago

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

rickya100

Junior Poster in Training

78 posts since Mar 2008

Reputation Points: 13

Solved Threads: 1

3 Years Ago

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 timeif ( 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

<script type="text/javascript">
var a = b = 'c';
alert( a );       // produces 'c'

alert( b = 'c' ); // produces 'c'
</script>

function toggleSlide ( id ) {
  for ( var f = 2005; f <= 2020; f ++ ) {
    if ( node = document.getElementById(f) ) {
      if ( f == id ) {
        node.style.display = 'block'; 
      } else {
        node.style.display = 'none';
      }
    }
  }
}

Does this all make sense?

langsor

Posting Whiz

390 posts since Aug 2008

Reputation Points: 30

Solved Threads: 36

3 Years Ago

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

rickya100

Junior Poster in Training

78 posts since Mar 2008

Reputation Points: 13

Solved Threads: 1

3 Years Ago

Show Comments

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).

function toggleSlide ( id ) {
  for ( var f = 2005; f <= 2020; f ++ ) {
    var node = document.getElementById(f);
    if ( node ) {
      if ( f == id ) {
        node.style.display = 'block'; 
      } else {
        node.style.display = 'none';
      }
    }
  }
}

...or...

function toggleSlide ( id ) {
  for ( var f = 2005; f <= 2020; f ++ ) {
    if ( document.getElementById(f) ) {
      if ( f == id ) {
         document.getElementById(f).style.display = 'block'; 
      } else {
         document.getElementById(f).style.display = 'none';
      }
    }
  }
}

...but that's personal preference really

langsor

Posting Whiz

390 posts since Aug 2008

Reputation Points: 30

Solved Threads: 36

This question has already been solved

You