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("&uarr; Close Playlist");
}
else if ($(this).html() == "Close Playlist") {
    $(this).html("&darr; Expand Playlist");
}

Though I'd suggest a slight amendment:

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

References:


    CSS Howto..

    How can I format outer table but not inner table

    How can I add my own CSS styles to CKEditor

    How to avoid blank lines at the top of new column (CSS columns)?

    How do I reference a javascript variable from a razor section?

    How do I break the border around text in css?

    How to execute jquery when a variable with a CSS property changes

    How do I make the rest of the page fade to black once my div loads and fade out once the div is closed?

    how to adjust the background color to the right height

    How to get GWT console/development mode to generate css errors?

    how to change height of div to covered the text area (CSS)

    How to show color only to the first li?

    How to use center-block and vertical align together using Bootstrap?

    How to give option to add css classes/IDs to content to in CMS's WYSIWYG content builder/editor to non-technical client?

    How can I fix left menu in bootstrap 3.0? [closed]

    How to override priority in CSS classes?

    How to write specific CSS for mozilla, chrome and IE

    In Wordpress how can I create a page which has 3 col-md-4 blocks in a container?

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child

    How to find and delete specific row in blogger css with span tag?

    How to get CSS selectors to work in the Developer Tools for Chrome 17?

    How can I vertically align the text in an anchor tag?

    How to make a div 100% of page (not screen) height?

    how would you set up the GUI for a web-based board game structure?

    How to align the header menu from left? i see a unexpected margin on left. Help please

    How to make LESS combine CSS rules with a comma

    How to share images between subdomains?

    How to fit two divs side by side horizontally?

    How to prevent image moving when resizing window

    Show/hide css class by url parameter with php

    How should I convert this PSD to HTML & CSS Menu