Home/ Questions/Q 43539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T15:30:40+00:00

I have the following html code: <h3 id=headerid><span onclick=expandCollapse(‘headerid’)>&uArr;</span>Header title</h3> I would like to

  • 0

I have the following html code: 

<h3 id='headerid'><span onclick='expandCollapse('headerid')'>&uArr;</span>Header title</h3>

I would like to toggle between up arrow and down arrow each time the user clicks the span tag. 

function expandCollapse(id) {        var arrow = $('#'+id+' span').html(); // I have tried with .text() too     if(arrow == '&dArr;') {              $('#'+id+' span').html('&uArr;');                    } else {                 $('#'+id+' span').html('&dArr;');                    } }

My function is going always the else path. If I make a javacript:alert of arrow variable I am getting the html entity represented as an arrow. How can I tell jQuery to interpret the arrow variable as a string and not as html.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. When the HTML is parsed, what JQuery sees in the DOM is a UPWARDS DOUBLE ARROW (‘⇑’), not the entity reference. Thus, in your Javascript code you should test for '⇑' or '\u21d1'. Also, you need to change what you’re switching to:

    function expandCollapse(id) {     var arrow = $('#'+id+' span').html();     if(arrow == '\u21d1') {              $('#'+id+' span').html('\u21d3');                                } else {                     $('#'+id+' span').html('\u21d1');                                } }
    • 0