jQuery toggle slide open/close link issue

Question

I have the following code that I am using to show/hide elements in a list.

The problem I have is that it loads fine, and opens/collapses fine. But after you have opened/closed once, it stays on the last down image. I need it to always show the down arrow if collapsed & the up arrow if expanded.

Any help appreciated... 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>

Edited ::

Just realised that my above code works well in Chrome. My issue is it not working in Firefox.

After expanding, it's fine (I have an up arrow). After collapsing, the up arrow stays in place and is not replaced by the down arrow.

Any hints/help appreciated.

Answer 1

why don't you use the toggle functions of jQuery ?

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

http://api.jquery.com/slideToggle/

Don't use a localCompare you can:

• use toggle function
• use boolean values

Answer 2

I'm not sure at all if this is what you want because you don't give a lot of details. But you can use this code. Basically, it will show the view div if you click on Hide /show (OR the images). And it will hide it if you click again. Care this script won't work if you spam-click.

<style>
    #hs{ cursor: pointer; }
    #down_arrow{ display: none; }
    #view{display: none};
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>


<script type="text/javascript">
$(document).ready(function() {

    $("#hs").toggle(
        function(){
            $("#up_arrow").hide();$("#down_arrow").show("slow");
            $("#view").show("fast");
        },
        function(){
            $("#down_arrow").hide();$("#up_arrow").show("slow");
            $("#view").hide("slow");
        }
    );


});


</script>
<div id="hs"> 
    Hide / Show
    <span id='up_arrow'><img src="images/arrow_up.png" /></span>
    <span id='down_arrow'><img src="images/down_up.png" /></span>
</div>

<div id="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>