How to add html glyph markup to JQuery show/hide function

Tags: jquery,html,css,css3

Problem :

I have a very basic show/hide function that slides a sticky header up and down to reveal more contents. I've managed to get the trigger to change the text to the appropriate wording when the container is opened or closed but Id like to also add an up arrow and down arrow glyph to the appended text as well. How can this be achieved?

The output that I'm looking for should look something like this:
↓ Expand Playlist
↑ Close Playist

Below is what my markup looks like thus far:

HTML

<div id="sticky_header">
    <div id="sticky_content" class="player">
        <a href="#" id="toggle_sticky_header">Expand Playlist</a>
    </div>
</div>

CSS

/* 
-------------------------------------------------------------------------
Sticky Header
-------------------------------------------------------------------------
*/

#sticky_header {
    background-color: #000000;
    /* border-bottom: 5px solid #B54000; */
    border-bottom: 5px solid #0995B0;
    /* height: 100px; */
    height: 600px;
    min-width: 100%;
    width: 100%;
    position: fixed;
    top: -500px;
    left: 0px;
    z-index: 2000;

    box-shadow: 0px 1px 15px #000000;
    -moz-box-shadow: 0px 1px 15px #000000;
    -webkit-box-shadow: 0px 1px 15px #000000;
}

#sticky_content {
    margin: 0px auto;
    width: 990px;
    padding: 15px 0px;
    color: #FFFFFF;
    position: relative;
}

a#toggle_sticky_header {
    position: absolute;
    bottom: -560px;
    right: 0px;
    color: #0995B0;
    font-size: 10px;
    line-height: 10px;
    text-transform: uppercase;
}

JQUERY

<!-- Toggle sticky header -->
<script type="text/javascript">
$(document).ready(function(){

    $('#toggle_sticky_header').click(function(){
        if($("#sticky_header").css("top") == "-500px") {
          $("#sticky_header").animate({top: "0px"}, 500);
        } else {
          $("#sticky_header").animate({top: "-500px"}, 500);
        }

        $(this).toggleClass("active"); 

        if ($(this).html() == "Expand Playlist") {
            $(this).html("Close Playlist");
        }
        else if ($(this).html() == "Close Playlist") {
            $(this).html("Expand Playlist");
        }

        return false;
    });

});
</script>

---

Solution :

Given that you're using html(), you could simply use the html entity:

if ($(this).html() == "Expand Playlist") {
    $(this).html("↑ Close Playlist");
}
else if ($(this).html() == "Close Playlist") {
    $(this).html("↓ Expand Playlist");
}

Though I'd suggest a slight amendment:

$(this).html(function(i,h){
    return h == '↓ Expand Playlist' ? '↓ Expand Playlist' : '↑ Expand Playlist'
});

References:

• HTML Symbol Entities.