expanding all hidden bits

[jpmoriarty]

I've got a bit of javascript on my page:


function expandIt(BlockName) {
img = eval('document.img_'+BlockName);
x=img.src;

if (document.getElementById(BlockName).style.display == "block") {
document.getElementById(BlockName).style.display = "none";
if (x.substring(x.length-8,x.length) == "down.gif") img.src = "menu_up.gif";
else img.src = "menu_down.gif"
} else {
document.getElementById(BlockName).style.display = "block";
if (x.substring(x.length-6,x.length) == "up.gif") img.src = "menu_down.gif";
else img.src = "menu_up.gif";
}
}

which displays hidden div's that i've got on the page top make them expand:


<a href="#" onClick="expandIt('block01'); return false;" class="modulelink">
<img name="img_block01" src="menu_down.gif" border="0" alt="Expand/Collapse Item" height="12" width="17" align="top">
Projects</a></h1>

<DIV ID="block01" style="display:none">
<div class="subsection">

<p><a href="#">Meeting Minutes</a></p>
<p><a href="#">Project Directories</a></p>
</DIV>


etc (I have about 5 of these, all with different ID's in the div's). What I'm wondering is is there a way I can make them all expand right through the page? I thought about a loop of sorts, but i was just wondering if there was some javascript that i could use that would automatically show all the hidden div's, without having to loop through all the different id's.

Sorry if that doesnt make much sense, and thanks in advance for assistance!

[gil davis]

Originally posted by jpmoriarty
What I'm wondering is is there a way I can make them all expand right through the page?No, but you could declare their default style as being "display: block" instead of "display: none".

Also, learn to use a style sheet instead of inline styles. It makes changes so much easier.

[jpmoriarty]

I do realise that the sections are hidden because i've told them to be, and therefore not telling them to be hidden will make them visible. I was after more of a solution that would enable me to keep them hidden, but be able to expand them all with one hyperlink / javascript.

If I include the display:none into the style sheet for the subsection div's, is there a way that i could do it then with javascript? ie change the subsection display to block? Or is that not possible because it's in the style sheet and you cant alter that?

[gil davis]

If I include the display:none into the style sheet for the subsection div's, is there a way that i could do it then with javascript?No, that doesn't change your task, it just lessens the size of your file and makes changes easier.is that not possible because it's in the style sheet and you cant alter that?You can alter the style sheet using javascript. Finding it is just about as complicated as looping through the divs. Also, there is no cross-browser implementation that I know of.

Maybe Stefan can help.

[gil davis]

For NS 6+ and fully W3C DOM compliant browsers:

document.styleSheets[n].cssRules[n].selectorText

will contain the class name. When you find a match to the class you want to change, then

document.styleSheets[n].cssRules[n].style.display

can be changed to "block" or "none" and will affect all objects with that class.

IE 5.5 uses

document.styleSheets[n].rules[n].selectorText

The "n" is which object in the array. If there is only one object, then n=0.

You cannot do this at all in NS 4.