Question

I am using the following code to expand/collapse some text on click of a link

I need to change the link name to ‘Hide’ when the text is expanded and have a different image (i.e. arrow_up.png).

How do I do this?

<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() {
        $('div.view').animate({
          height: (($divView.height() == 90)? innerHeight  : "90px")
        }, 500);
        return false;
    });
});
</script>
<div class="view">
  <ul class="moduleItemExtraFields">
        <li>text here</li>
        <li>text here</li>
        <li>text here</li>
        <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">Show <img src="images/arrow_down.png" /></div>

Answer 1

<script type="text/javascript">

    //...

    $('div.slide').click(function() {

        // Update the HTML in this element
        var slideHtml = $(this).html();

        // Switch between show/hide
        if (slideHtml.localeCompare('Show <img src="images/arrow_up.png" />') < 0)
           $(this).html('Show <img src="images/arrow_up.png" />');
        else
           $(this).html('Hide <img src="images/arrow_down.png" />');

        $('div.view').animate({
          height: (($divView.height() == 90)? innerHeight  : "90px")
        }, 500);
        return false;
    });

    //...
</script>