Toggle Javascript works on second click, not first

JavaScript
1

Greetings, As the thread title explains, my toggle javascript only works on the second and subsequent clicks. not the first.

here’s the page:
http://tinyurl.com/yozdgh

Here’s the javascript code in the head:

<script language="javascript">
  function toggleDiv(divid){
    if(document.getElementById(divid).style.display == 'none'){
      document.getElementById(divid).style.display = 'block';
    }else{
      document.getElementById(divid).style.display = 'none';
    }
  }
</script>

And the button:

<a href="javascript:;" onclick="toggleDiv('detailspecs');">Details</a>

Here’s the css page:
http://tinyurl.com/2yrjw8
Do a quick page “Find” of “#detailwraper” to skip to the css code that applies to this section.

I’ve encountered this problem before but don’t remember how I solved it.

It happens in Firefox Mac, Safari Mac and IE 6 PC.

Assistance would be greatly appreciated.

Much thanks.

John.

2

Everything looks ok in regards to the javascript and the css. In the css, the display property is initially set (if it were not set, the if statement in your javascript wouldn’t evaluate to true).

Try adding a document.writeln(divid) before the if statement, just to see what is being passed on the first click, to your javascript.

You may try changing your href=“javascript:;” to href=“#”

If that doesn’t work, if you have a css editor with syntax hilighting, check to make sure you don’t have any unterminated properties (i.e. ; missing at the end of your css property)…I’ve seen weird stuff happen if a css property is not terminated by a ;

3

Thanks Holmescreek!

Try adding a document.writeln(divid) before the if statement, just to see what is being passed on the first click, to your javascript.

I tried this. Though I’m pretty sure I didn’t have the syntax correct when I added it, I got a flash of “detailspecs” which is the div id.

You may try changing your href=“javascript:;” to href=“#”

Tried it. Same result.

Check to make sure you don’t have any unterminated properties

I’m using Dreamweaver and Coda. Both highlight when there’s an unterminated property.

HOWEVER, If I initially set #detailspecs to “display:block;” the button DOES toggle on the first click, changing the display to “none” so that the “detailspecs” div hides.

Does THAT offer any more clues?

Does this mean I need to post this over in a CSS forum instead?

Thanks again.

4

You have the following:


 if(document.getElementById(divid).style.display == 'none'){ ... }

Try alerting document.getElementById(divid).style.display and you will notice that it will alert an empty string. Meaning no value has been set.

You probably defined the display to be none in a style block or an external css file. This will script would work if you defined your CSS inline, meaning using the style tag.

Read the following to find out why this is the case.

5 


<script language="javascript">
  function toggleDiv(divid){
  
  x = document.getElementById(divid).style;
      
      
    if(x.display == 'none' || x.display == ''){
      x.display = 'block';     
    }else{
      x.display = 'none';
    }
    
  }
</script>

That will fix it.

6

Yeah, I was wondering about this myself, after figuring it wasn’t picking up the initial value, I checked exactly what value was being passed on the first and subsequent clicks. I read the article, but really doesn’t explain why javascript won’t pick up the value from an external style sheet. I just used (|| somestyle == ‘’) — so, it is possible to use this as a work around for external style sheets (at least in this case). But, for example, if a property where set to “red” in an external style sheet, you wouldn’t be able to retrieve the value.

The link to the article that you posted doesn’t really explain why javascript can’t fetch the value of the property on the first click, but will on subsequent clicks. Any clues? I try to avoid inline styles at all cost, editing the inline html kind of defeats the purpose of having style sheets (separation of content and presentation.)

7

Certainly did! Thanks so much. And I was able to leave my css external.

FYI, I tried putting the style inline before. Still had the problem.

Thanks to both of ya for your time and effort!

8

In the future, what you could do is set up a javascript function that runs when the page is initially loaded. This seems to fix problem with external style sheets as well…

For instance a function that automatically sets detailspecs_1, detailspecs_2 etc., to display=“none” for all of the divs.

For example, the first function (below) hides all the divs when the page loads i.e. detailspecs_1, detailspecs_2…detailspecs_4

The section function, called during and onclick(), hides/collapses all the divs by calling hideall(), then expands/shows whatever div was clicked on.



 <script language=javascript>

  function hideall(){
    var numdivs=4;
	for(i=1; i <= numdivs; i++) {
	  x = document.getElementById('detailspecs_' + i).style;
      x.display = "none";
	 }
	
  }
  
  function showlayer(layerid){
     hideall();
	 x = document.getElementById(layerid).style;
     x.display = "block";
  }
  
</script>