I have the following html, which is a dl tag containing a dt tag with a class of toggle and containing the FAQ, and then a dd tag with a class of expand that contains the answer to the FAQ:

```
<dl>
<dt class="toggle">&#9660; Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
....
</dl>

```

and the following jQuery:

```
$(function () {
    $('.expand').hide();

    $('.toggle').click(function() {
        var $expand = $(this).next('.expand');
        if ($expand.is(':hidden')) {
            $expand.slideDown();
        } else {
            $expand.slideUp();
        }
    });
});

```

This function expands or collapses the FAQ answer.

What I would really like to do is additionally replace the ▼ down arrow with a ▲ up arrow when the text is expanded. I do not want to use images or sprites.

No matter how I try to encode / use the slice or substring functions I have so far been unable to achieve this.

Any comments appreciated, but be kind as this is my first post.