How to execute a different Javacript in mobile browsers

I have a FAQ section where the user clicks on Question links to show hidden Answer DIVs. When one answer is displayed, all the other answers are hidden.
The problem is that this Javascript is not rendering correctly in the Blackberry browser, even when the user has Javascript enabled. When a Blackberry user clicks on the Question link, the Answer DIV is not displayed.
I would like to modify the script so that if the browser is mobile (i.e. width=450 or less), all the Answer DIVs are visible and not hidden. How can I accomplish this?

<script  type="text/javascript">
<!--
function showAnswer(num) {
  var num_questions = 2;  //number of drop down menus on the left nav menu
  var element;
  var i;
  
  // Close all menus
  for (i=1; i <= num_questions; i++) {
    if (i != num && document.getElementById("answer" + i)) {  //close all answers except for question clicked
	  document.getElementById("answer" + i).style.display = "none";
	}
  }
  
  element = document.getElementById("question" + num);

  if (document.getElementById("answer" + num).style.display != "block") {
    document.getElementById("answer" + num).style.display = "block";
  }
  else {
    document.getElementById("answer" + num).style.display = "none";
  }
}
-->
</script>		

<div id="question1" class="faqQuestion"><a href="#" onclick="showAnswer('1');">Q. Question 1</a></div>
<div id="answer1" class="faqAnswer hidden">A. Answer 1.</div>  
<div id="question1" class="faqQuestion"><a href="#" onclick="showAnswer('2');">Q. Question 2</a></div>
<div id="answer1" class="faqAnswer hidden">A. Answer 2.</div>

Select allOpen in new window