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

Question

rickya100 3 Junior Poster in Training

15 Years Ago

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.

javascript

3 Contributors
9 Replies
223 Views
3 Days Discussion Span
Latest Post 15 Years Ago Latest Post by langsor

All 9 Replies

~s.o.s~ 2,560 Failure as a human

15 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~ 2,560 Failure as a human

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

langsor

15 Years Ago

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

rickya100 commented: Great help, thanks +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

rickya100 3 Junior Poster in Training · Answer 1 · 2008-08-24T20:46:45+00:00

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 3 Junior Poster in Training · Answer 2 · 2008-08-25T19:57:45+00:00

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.

langsor · Answer 3 · 2008-08-25T22:44:56+00:00

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

rickya100 3 Junior Poster in Training · Answer 4 · 2008-08-26T01:20:52+00:00

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

langsor · Answer 5 · 2008-08-26T02:18:07+00:00

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

<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?

rickya100 3 Junior Poster in Training · Answer 6 · 2008-08-26T02:30:29+00:00

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

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

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers