Simple Javascript does not work in FireFox (but in all other browsers)

Question

I have this code that I use to elicit answers to some questions in the frequently asked questions section of my website. You click on a question and the div containing the answer is shown below.

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

Links just do nothing.

Any ideas why, or any better methods for the FAQ section? I already have jQuery uploaded to my page, if something can 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

, jquery, , 30 .

:

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

, : document.getElementByID .

EDITED

HTML, :

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

:

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

• "display: none" , , , . , javascript ( ), . javascript. , javascript.
• , animate(), slidetoggle(), .

Answer 2

, , :

document.getElementByID(tag).style.display

tag.style.display .

Answer 3

"block"

tag.style.display='block'

Answer 4

:

<script type="text/javascript">
  function toggle(tag) {
      tag.style.display = (tag.style.display == 'block') ? 'none' : 'block';
  }
</script>

Answer 5

, .

-, , .

tag.style.display='none' tag.style.display='none';

-, document.getElementById , DOM

- :

function toggle(elementId) {
    var tag = document.getElementById(elementId);
    ...
}

http://jsbin.com/abuce4/edit

Answer 6

jQuery, :

$("#" + tag).toggle();

Answer 7

<a onclick='toggle(document.getElementById("question1"));'">

Answer 8

( ):

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

and (getElementById is used):

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

UPDATES : for a jQuery solution, I would use the jQuery Tabs approach:

<a class="toggle" href="#question1">FAQ Question Link 1</a>
<div id="question1" style="display:none">
    <p>FAQ Answer goes here</p>
</div>
<a class="toggle" href="#question2">FAQ Question Link 2</a>
<div id="question2" style="display:none">
    <p>FAQ Answer goes here</p>
</div>

and JS:

<script type="text/javascript">
$(document).ready(function() {
    $('.toggle').click(function() {
        $($(this).attr('href')).toggle();
        return false;
    });
});
</script>

Answer 9

<a href="#" onclick="javascript:$(this).next().toggle();">Question</a>
<div style="display:none;">Answer</div>

Or more "general" and clean:

HTML:

<a class="question">Question 1</a>
<div class="answer">Answer 1</div>

<a class="question">Question 2</a>
<div class="answer">Answer 1</div>

CSS:

.answer{
display:none;
}

JS:

$(document).ready(function() {

$(".question").click(function(event){
    $(this).next().slideToggle();
});
}

slideToggle (); or toggle (); Enjoy it.