How can I hide DIVS with JavaScript on page load?

[Hootenanny]

I have some divs on a web page, with the class name "hans" which I would like to hide with JavaScript when the page loads. The reason I have it set up this way is so that the user can reveal the div's by clicking a link, but if JavaScript is disabled, the div's will be displayed by default. I've written a loop to loop through the document and hide all the divs, but it doesn't seem to be working. All the divs have unique ID's. The toggle() function used below is a function that just toggle's a named div between display:none; and display:block;

function hideans() {
	var boxes = document.getElementsByTagName("div");
	
	 for(var i=0;i<boxes.length;i++) {
        var boxClass = boxes[i].className;
      
        if(boxClass.match("hans")) {
            toggle(boxes[i]);
        }
    }
}

Any help would be much appreciated.

 

[Greg Bernhardt]

Very very few people have JS disabled.

At first glance, I think to get the number of elements for the loop you need to do var num = boxes.length; after getting the list from getelements. Then use num instead of boxes.

 

[kenewbie]

I don't see any problems with that, although I'm not that familiar with javascript. If you make a sample page and give me the url I'm sure I can locate the problem for you though.

Or you can try to locate the exact problem yourself by inserting alerts with the relevant data as output and see if it coincides with reality. IE:

function hideans() {
	var boxes = document.getElementsByTagName("div");
         alert('Document contains ' + boxes.length + ' div elements.');

	 for(var i=0;i<boxes.length;i++) {
        var boxClass = boxes[i].className;
         alert('Div #' + i + ' is of class "' + boxClass + '".');
      
        if(boxClass.match("hans")) {
            alert('Div #' + i + ' (class "' + boxClass + '") is a match, toggling now.');
            toggle(boxes[i]);
        }
    }
}

If you get no alert boxes then your code never reaches the hideans() function, if you get all the expected alert boxes then the problem is inside toggle() somewhere.

k

 

[Hootenanny]

Thanks guys, I added the num variable as you suggested Greg. I also implemented the diagnostic alerts that you suggested kenewbie. All goes well until the function calls the toggle function, after which the function fails to execute and the for loop terminates. I've posted the toggle code below. Thanks for your help thus far guys,

function toggle( whichLayer ){
  var elem, vis;
  if( document.getElementById ) // W3 Standard Compliance
    elem = document.getElementById( whichLayer );
  else if( document.all ) // Old IE
      elem = document.all[whichLayer];
  else if( document.layers ) // Nestscape 4
    elem = document.layers[whichLayer];
  vis = elem.style;

  // if no style.display value

  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.dis

 

[kenewbie]

"whichLayer" is already an element object, there is no need to go through all the hoops at the beginning of the function. As far as I can tell, this is all you need to do:

function toggle(e)
{
    e.style.display = e.style.display != '' ? '' : 'none';
}

If you still have trouble, it would be a lot easier to fix this for you if you made a sample document with a few divs and the relevant code in it and put it on a webserver. Sort of a bare bones sample that should work only it doesn't.

k

 

[Hootenanny]

I think I've found the problem. My toggle function takes the element ID as an argument, however, my hideans() function only provides the class name. Is there anyway to loop though all the elements with a given class name I've already found and find their ID?

 

[CaptainQuasar]

I think I've found the problem. My toggle function takes the element ID as an argument, however, my hideans() function only provides the class name. Is there anyway to loop though all the elements with a given class name I've already found and find their ID?

I'm pretty sure it's just a “.id” property on the element object.

The http://www.visibone.com/javascript/" are really handy for this stuff; you should buy them if you use them, of course, but he provides full images of the charts themselves on his site.

⚛​

 

[Hootenanny]

I'm pretty sure it's just a “.id” property on the element object.

That's great, thanks a lot! For those who are interested, here's the complete code,

function toggle( whichLayer ){
  var elem, vis;
  if( document.getElementById ) 
    elem = document.getElementById( whichLayer );
  else if( document.all )
      elem = document.all[whichLayer];
  else if( document.layers )
    elem = document.layers[whichLayer];
  vis = elem.style;
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

function hideans() {
	var boxes = document.getElementsByTagName("div");
	var num = boxes.length;
	 for(var i=0;i<num;i++) {
      
        if(boxes[i].className.match("hans")) {
            toggle(boxes[i].id);
        }
    }
}

window.onload = function() {
        hideans();
}

 

[kenewbie]

You are doing this overly elaborate. boxes is a DOM element, why not just send that to toggle() rather than go out of your way to pass boxes.id and then transform it back to a DOM element?

function toggle( elem ) {
  vis = elem.style;
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}

function hideans() {
	var boxes = document.getElementsByTagName("div");
	
        for(var i=0;i<boxes.length;i++) 
        if(boxes[i].className.match("hans")) toggle(boxes[i]);
 }

k

 

[Hootenanny]

The reason I have my toggle() function set up as shown, is that it's used elsewhere on the site where I need it to take an element Id as an argument. Thanks for your help by the way.

 

[kenewbie]

The reason I have my toggle() function set up as shown, is that it's used elsewhere on the site where I need it to take an element Id as an argument.

Ahh ok, that explains it :)

k