HTML entity inside of jQuery html()

Question

I have a hidden div and a link to toggle the div's visibility. The link contains text/html that needs to also toggle ('hide'/'show'). Here is my function:

jQuery('#toggle_filter_link').click(function() {
    jQuery('#searchfilter_wrap').slideToggle("slow");
    jQuery(this).html(jQuery(this).text() == 'Hide &uarr;' ? 'Show &darr;' : 'Hide &uarr;');
});

This function works as intended until I add the arrows to the HTML (↑ and ↓), at which point it toggles to "Hide ↑" the first time, and then remains stuck.

Here a jsFiddle.

I assume that I need to escape the HTML Entities somehow, but considering that the first switch works I am a bit confused. It's probably something obvious that I'm missing though. :-)

Thanks for the help!

Try adding \ before the ;s

ElendilTheTall
– ElendilTheTall

2014-02-07 11:45:22 +00:00
Commented Feb 7, 2014 at 11:45 — ElendilTheTall
– ElendilTheTall, Commented Feb 7, 2014 at 11:45
Adding \ before the ; did not work unfortunately.

pschueller
– pschueller

2014-02-07 12:02:50 +00:00
Commented Feb 7, 2014 at 12:02 — pschueller
– pschueller, Commented Feb 7, 2014 at 12:02

Quentin · Accepted Answer · 2014-02-07 11:45:28Z

You're comparing text to html

Change jQuery(this).text() to jQuery(this).html().

Note that you might still have issues due to the way that browsers normalise HTML and you would probably be better off testing some other condition.

jQuery('#toggle_filter_link').click(function() {
    jQuery('#searchfilter_wrap').slideToggle("slow");
    var $this = jQuery(this);
    if ($this.hasClass('show')) {
        $this.removeClass('show');
        $this.html('Hide &uarr;');
    } else {
        $this.addClass('show');
        $this.html('Show &darr;');
    }
});

… or just testing for something that isn't going to be normalised:

jQuery('#toggle_filter_link').click(function() {
    jQuery('#searchfilter_wrap').slideToggle("slow");
    jQuery(this).html(jQuery(this).text().indexOf('Hide') > -1 ? 'Show ↓' : 'Hide ↑');
});

Thank you! Changing to .html() did not work, probably because of the way HTML gets normalized as you mentioned... so I am now testing for indexOf('Hide') which works like a charm.

Collectives™ on Stack Overflow

HTML entity inside of jQuery html()

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related