Firefox display=block problem

I have a the following HTML

 <a id="rptQuestions_ctl01_hlQuestion" onclick="rptQuestions_ctl01_pnlAnswer.style.display = rptQuestions_ctl01_pnlAnswer.style.display == 'none'? 'block' : 'none';" href="javascript:">Header Link</a>

            <div id="rptQuestions_ctl01_pnlAnswer" style="display:none;">

            My Text to display

</div>

This works as i would expect in IE8, where it displays the div when you click the header link, and then hides it when clicking the header link again. However, in Firefox, nothing happens when i click the header link. I'm assuming this is to do with IE being forgiving of an error i have made, and Firefox sticking to the rules, but i can't see w开发者_StackOverflow社区hat i am doing wrong. Any ideas?

--- EDIT

I've tried this with the following code and it works fine:

        <a id="rptQuestions_ctl01_hlQuestion" onclick="jasvascript:document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display='block';" href="#">My header Link</a>

            <div id="rptQuestions_ctl01_pnlAnswer" style="display:none;">
My Text

</div>

so it seems the problem is the ternary operator not working correctly. Anyone see the problem?

The "onclick" attribute should have the following code:-

onclick="document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display = document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display == 'none' ? 'block' : 'none';"

Hope it helps.

<a id="rptQuestions_ctl01_hlQuestion" onclick="javascript:document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display = document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display == 'none'? 'block' : 'none';return false" href="#">Header Link</a>

        <div id="rptQuestions_ctl01_pnlAnswer" style="display:none;">

        My Text to display

The same code without the ternary operator:

<a id="rptQuestions_ctl01_hlQuestion" onclick="javascript:if(document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display == 'none'){document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display='block'}else{document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display='none'};return false" href="#">My header Link</a>
<div id="rptQuestions_ctl01_pnlAnswer" style="display:none;">
    My Text
</div>

The previous code also worked, so I'm not sure how this would change anything. If you paste this code into a new HTML file it will work. If it doesn't work when you put it in your file, then the problem is probably somewhere else in the file. In that case, you should post more of the surrounding code.

1. No, it does work in Firefox (just tested on 3.6.13).
2. Can't you use jQuery, or some other library? Sorry, this is just too ugly... :-)

First and most important. USE: document.getElementById("the id to use.");

Second. Try using a javascript method to achieve this. and use a function in the onclick, or do an assignation directly on <script type="text/javascript"></script> Something like this: document.getElementById("rptQuestions_ctl01_hlQuestion").onclick = function(){ document.getElementById('rptQuestions_ctl01_pnlAnswer').style.display = rptQuestions_ctl01_pnlAnswer.style.display == 'none' ? 'block' : 'none'; }