Question

I have this code which I’m using to reveal the Answers to some questions in an FAQ section on my website. You click the question and the div containing the answer is revealed below.

It works in Safari, Chrome, Opera and even IE, but not in Firefox.

The links just do nothing.

Any ideas why, or any better methods for doing an ‘FAQ’ section? I have already got jQuery loaded in my page if there’s something that could be done better with it there, I don’t know. Or a CSS only solution?

Here is my code:

JS code:

    <script type="text/javascript">
    function toggle(tag) {
        if (tag.style.display=='') {
            tag.style.display='none'    
        } else {
            tag.style.display=''
        }
    }
    </script>

HTML code:

<a href="javascript: toggle(question1)">FAQ Question goes here</a>
    <div id="question1" style="display:none">
        <p>FAQ Answer goes here</p>
    </div

Answer 1

Seriously, I recommend you use jquery, you will not have this kind of problem and it’s less than 30 Kbs.

Here is what you look for:

http://api.jquery.com/toggle/

Anyway, you should always use: document.getElementByID to get a certain element.

EDITED

It depends on the structure of your HTML, if I had this situation:

http://www.jsfiddle.net/dactivo/Qcm4G/

I would do this:

$(".questionsheader").click(function(){
                             $(this).next("div").toggle();                             }
);

SOME OTHER CONSIDERATIONS

• I wouldn’t use “display:none” for the answers for a simple yet perhaps not practical reason. People without javascript enabled (as happen with the software of some handicapped people) will not be able to read the answers. This is why I hide the answers with javascript. They will only disappear if javascript is enabled.
• You can use other effects like animate(), slidetoggle() to make it more interesting.