jquery toggle issue in firefox - php

Question

The below code works fine in Chrome, but doesn't work correctly in Firefox.
In Chrome:
Expanding the hide/show link shows the up arrow correctly when expanded and the down arrow when collapsed
In Firefox:
Expanding the hide/show link shows the up arrow correctly when expanded, but when collapsed it still shows the up arrow.
What am I doing wrong?
Thanks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
// Update the HTML in this element
var slideHtml = $(this).html();
// Switch between show/hide
if (slideHtml.localeCompare('Hide / Show <img src="images/arrow_up.png" />') < 0)
$(this).html('Hide / Show <img src="images/arrow_up.png" />');
else
$(this).html('Hide / Show <img src="images/arrow_down.png" />');
$('div.view').animate({
height: (($divView.height() == 90)? innerHeight : "90px")
}, 500);
return false;
});
});
</script>
<div class="view">
<ul>
<li>text here</li>
<li>text here</li>
<li>text here</li>
<li>text here</li>
<li>text here</li>
<li>text here</li>
</ul>
</div>
<div class="slide">Hide / Show <img src="images/arrow_down.png" /></div>

Answer 1

You should use toggle() it is much simpler and it avoids you all this.
I made you an example here: http://jsfiddle.net/MVnbM/
HTML:
Click me
<div class="arrowUp">Up</div>
<div class="arrowDown">Down</div>
JS:
$('.arrowUp').hide();
$('a.clickMe').click(function() {
$('.arrowUp, .arrowDown').toggle();
});
Here's your code modified:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('.arrowUp').hide();
$('div.slide').click(function() {
$('.arrowUp, .arrowDown').toggle();
});
});
<div class="view">
<ul>
<li>text here</li>
<li>text here</li>
<li>text here</li>
<li>text here</li>
<li>text here</li>
<li>text here</li>
</ul>
</div>
<div class="slide">Hide / Show <img src="images/arrow_down.png" class="arrowUp" /><img src="images/arrow_down.png" class="arrowDown" /></div>

Answer 2

What about this variant using toggle and toggleClass
http://jsfiddle.net/347pg/