Question

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 == '⇓') {              $('#'+id+' span').html('⇑');                    } else {                 $('#'+id+' span').html('⇓');                    } } 

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.

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');                                } }