jQuery Show/Hide Div

Question

I\'m using this for a show/hide div expander, which is working fine, however, the HTML entities aren\'t being outputted.

$(document).ready(function() {
    $(\'.         


        

Answer 1

.text already does the conversion from "text" to "HTML" itself.

From the documentation:

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), which replaces special characters with their HTML entity equivalents (such as < for <).

So your text is being converted to ▲ and thus being rendered, from your point-of-view, verbatim.

You can encode the literal directly into the string (noting that the Javascript \u expects Hex, not Decimal):

$(this).text("\u25B2 See Less");

If you want to use the HTML entities:

$(this).html("▲ See Less");

See this jsfiddle.net snippet that shows:

• Your approach
• A valid approach with encoding the literal directly into the Javascript string
• The approach with .html.

Answer 2

.text() doesn't process any html entity. You must use .html() in this case.

Answer 3

Have you tried using .html rather then .text

$(document).ready(function() {
    $('.slickbox').hide();
    $("#slick-toggle").toggle(function() {
        $(this).html("▲ See Less");
        $('.slickbox').slideToggle(500);
    }, function() {
        $(this).html("See More ▼");
        $('.slickbox').slideToggle(500);
    });
});