Replacing HTML entities in jQuery

Question

I have the following html, which is a dl tag containing a dt tag with a class of toggle and containing the FAQ, and then a dd tag with a class of expand that contains the answer to the FAQ:

<dl>
<dt class="toggle">&#9660; Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
....
</dl>

and the following jQuery:

$(function () {
    $('.expand').hide();

    $('.toggle').click(function() {
        var $expand = $(this).next('.expand');
        if ($expand.is(':hidden')) {
            $expand.slideDown();
        } else {
            $expand.slideUp();
        }
    });
});

This function expands or collapses the FAQ answer.

What I would really like to do is additionally replace the ▼ down arrow with a ▲ up arrow when the text is expanded. I do not want to use images or sprites.

No matter how I try to encode / use the slice or substring functions I have so far been unable to achieve this.

Any comments appreciated, but be kind as this is my first post.

Your first question is well formulated, which is rare enough. Welcome to StackOverflow! — BenMorel
– BenMorel, Commented Oct 1, 2015 at 22:35
Place the entities inside of a span. Have both elements there to begin with and set a class on the dt on state and css can show/hide them. — epascarello
– epascarello, Commented Oct 1, 2015 at 22:35
Many thanks for that, and to all those who have taken the trouble to provide the elegant solutions that I now have at my disposal. — Freeway
– Freeway, Commented Oct 2, 2015 at 10:31

epascarello · Accepted Answer · 2015-10-01 22:46:55Z

1

Another option is just to rely on CSS to show hide the up and down arrows.

$(".toggle").on("click", function () {
    $(this).toggleClass("open");
});

.toggle {
    cursor: pointer;  
}

.toggle > span + span {
  display : none;
}

.toggle.open > span {
  display : none;
}

.toggle.open > span + span {
  display : inline;
}

.toggle + dd.expand { display : none; } 
.toggle.open + dd.expand { display : block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt class="toggle"><span>&#9650</span><span>&#9660;</span> Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
</dl>

answered Oct 1, 2015 at 22:46

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Freeway Over a year ago

All these solutions work just fine, but the css solution is the cleanest. The problem with the italic tag solution is that - would you believe - some fonts italicise the up/down arrows and make them look awful!

epascarello Over a year ago

So you change the <i> to a span in that solution... ;)

Freeway Over a year ago

Exactly! And of course you have 2 span tags, one for the up arrow and one for the down, and just toggle hide and show.

Roko C. Buljan · Accepted Answer · 2015-10-01 22:22:58Z

Place your arrow inside an <i> tag so that you can target it using jQuery:

<dt class="toggle"><i>&#9660;</i> Here is a FAQ 1</dt>

Example:

$(function () {

  $('.expand').hide();

  $('.toggle').click(function() {
    var $expand = $(this).next('.expand');
    var isHidden = $expand.is(':hidden');
    $expand.slideToggle();
    $("i", this).html(isHidden? "&#9650;" : "&#9660;");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
  <dt class="toggle"><i>&#9660;</i> Here is a FAQ 1</dt>
  <dd class="expand">
    <p>1 And here is the answer</p>
  </dd>
  <dt class="toggle"><i>&#9660;</i> Here is a FAQ 2</dt>
  <dd class="expand">
    <p>2 And here is the answer</p>
  </dd>
  <dt class="toggle"><i>&#9660;</i> Here is a FAQ 3</dt>
  <dd class="expand">
    <p>3 And here is the answer</p>
  </dd>
</dl>

Worked immediately and a nice clean solution. Thank you so much.

BenMorel · Accepted Answer · 2015-10-01 22:39:21Z

You can replace by the Unicode value of the character instead of the HTML entity.

Character ▼ is 9660 in decimal, and 25BC in hexadecimal. Its HTML entity is therefore ▼, and its JavaScript string form is "\u25BC".

Same goes for ▲, which is 9650 in decimal and 25B2 in hexadecimal.

So you can replace back and forth in text strings with:

.replace("\u25BC", "\u25B2");

Working example:

$(function () {
    $('.expand').hide();

    $('.toggle').click(function() {
        var $this = $(this);
        var $expand = $this.next('.expand');
        if ($expand.is(':hidden')) {
            $expand.slideDown();
            $this.text($this.text().replace("\u25BC", "\u25B2"));
        } else {
            $expand.slideUp();
            $this.text($this.text().replace("\u25B2", "\u25BC"));
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl>
<dt class="toggle">&#9660; Here is a FAQ</dt>
<dd class="expand">
    <p>And here is the answer</p>
</dd>
....
</dl>

Collectives™ on Stack Overflow

Replacing HTML entities in jQuery

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related