...

View Full Version : Changing multiple elements at once



bblinn
07-27-2006, 07:28 PM
I have a FAQ that uses code shown below to hide the answer until the user clicks the link. I assume there's a way to apply a "Reveal all" and "Hide all" function, but so far I haven't hit upon it. The ID elements are sequentially numbered.

<p class="newsTextBold">This is a <a href="#faq000" class="Fsp.Reveal">question</a>?</p>
<div id="faq000" class="Fsp.Hide">
<p>Here is the answer.</p>
<p><a href="#faq000" class="Fsp.Hide"><span class="smallblue">Close this explanation.</span></a></p>
</div>

I'm using routines from http://fairsky.us/ and I'm just sufficiently familiar with JS and some of the DOM to be dangerous.

Beagle
07-27-2006, 07:45 PM
the easiest way to apply styles to a group of elements is to wrap them in a container element.

Hooray for structured markup!

glenngv
07-27-2006, 08:44 PM
But the answer sections have questions in between them that need to be visible, so you can't wrap them all in an element and not hide the questions.

function showHideAll(clsName){
var ctr = 1;
var div;
while (div=document.getElementById("faq"+(ctr++))){
div.className = clsName;
}
}
...
onclick="showHideAll('Fsp.Hide')"
onclick="showHideAll('Fsp.Show')"It's easier to number the faq divs without padding it with zeroes to avoid further manipulation. Just number it faq1, faq2,...faq10, ...faq100



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum