Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing multiple elements at once

    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.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    the easiest way to apply styles to a group of elements is to wrap them in a container element.

    Hooray for structured markup!

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,960
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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.
    Code:
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •