View Full Version : Changing multiple elements at once

07-27-2006, 08: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>

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

07-27-2006, 08: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!

07-27-2006, 09: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.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