CODEWITHSUNDEEP
javascripthtml
Jamie
Jamie

Reputation: 45

HTML Encoded Text via JS not rendering

I have a pair of triangles I wanted to include in a design which requires the text to be displayed via a JS file, but the HTML encoded text from the JS isn't rendering. Would anyone know how to make this work?

Thanks for your time.


Here's the specific Text:

Websites ▴ Websites ▾

Here's the JS:
(Last line reads: Websites &#9652 Websites &#9662)

$(function() {
  $(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Websites ▴" : "Websites ▾";
        });
    });

  });
});

Upvotes: 2

Views: 78

Answers (1)

Paul Draper
Paul Draper

Reputation: 83205

Change

$header.text(function () {
    //change text based on condition
    return $content.is(":visible") ? "Websites ▴" : "Websites ▾";
});

to

$header.html($content.is(":visible") ? "Websites ▴" : "Websites ▾");

The .text() function is HTML escaped (again). Plus it doesn't take a function.

Upvotes: 1

Related Questions