Revealing and hiding a playlist Is there a better way of writing this? I feel like there's a lot of lines for such a small thing.  Can it be optimized?

$j('#hideShowBtn').toggle(function() {
     $j('.playlist-bar-tray').slideUp();
     $j(this).attr("title","Show Playlist");         
     $j(this).children("div").html('Show Playlist');
     $j(this).children("span").html('&amp;#9660;');
 }, function() {
     $j('.playlist-bar-tray').slideDown();
     $j(this).attr("title","Hide Playlist");
     $j(this).children("div").html('Hide Playlist');
     $j(this).children("span").html('&amp;#9650;');
});
How about "cheating" a bit by creating two copies of those elements whose values should change and then just alternate between which element to show. Something like this:



&lt;div class="toggleable"&gt;
    &lt;span&gt;&amp;#9660;&lt;/span&gt; Show playlist
&lt;/div&gt;
&lt;div class="toggleable" style="display: none;"&gt;
    &lt;span&gt;&amp;#9650;&lt;/span&gt; Hide playlist
&lt;/div&gt;


And then somewhere in your JavaScript you call the .toggle() function from the jQuery UI:

$(".toggleable").toggle();


Now it would look as though the texts changed, while actually you are hiding one element and displaying another.