#1
  1. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jan 2004
    Location
    Budapest
    Posts
    1,703
    Rep Power
    67

    Change element display by class name


    I have a page as seen here www.clappliancerepair.com

    On the page you'll see a list w/ 3 questions, each followed by a link that reads "Answer".

    When the user clicks that I call a function that changes the display property of a span element containing the answer to the question.

    It works great but want I want is if they click another question's "Answer" link any open answers will close.

    My code I have now is this -
    Code:
        function showStuff(id) {
            document.getElementById(id).style.display = 'block';
        }
        function hideStuff(id) {
            document.getElementById(id).style.display = 'none';
        }
    So what I am thinking I need is a line of code in the function showStuff that would hide all elements w/ a class of .faqanswer

    Can I do this? I would appreciate any help.
    Today the world, tomorrow the universe...
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Change the style for all of the elements, that you want to hide; to display "none" and then set the element, you want to display, to a block level element.

    Something like...

    Code:
        function showStuff(id) {
            // you could do this with a for or while loop, as well... that would be less repetition and reduce memory usage
            new hideStuff('question1');
            new hideStuff('question2');
            new hideStuff('question3');
            document.getElementById(id).style.display = 'block';
        }
        function hideStuff(id) {
            // or... use document.getElementById(id).className; that's what your really asking in your question, but you will need to add your css classes for this to work
            document.getElementById(id).style.display = 'none';
          }
        }
    Last edited by web_loone08; September 23rd, 2012 at 09:54 PM.

IMN logo majestic logo threadwatch logo seochat tools logo