<p>I have the following html code: </p>

<pre><code>&lt;h3 id="headerid"&gt;&lt;span onclick="expandCollapse('headerid')"&gt;&amp;uArr;&lt;/span&gt;Header title&lt;/h3&gt;
</code></pre>

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

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

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

[{'answer_id': 30013, 'author': 'jason saldo', 'author_id': 1293, 'author_profile': 'https://Stackoverflow.com/users/1293', 'pm_score': 1, 'selected': False, 'text': '<p>Check out the <a href="http://docs.jquery.com/Effects/toggle" rel="nofollow noreferrer">.toggle()</a> effect.</p>\n\n<p>Here is something similar i was playing with earlier.</p>\n\n<p>HTML:</p>\n\n<pre><code>&lt;div id="inplace"&gt;\n&lt;div id="myStatic"&gt;Hello World!&lt;/div&gt;\n&lt;div id="myEdit" style="display: none"&gt;\n&lt;input id="myNewTxt" type="text" /&gt;\n&lt;input id="myOk" type="button" value="OK" /&gt;\n&lt;input id="myX" type="button" value="X" /&gt;\n&lt;/div&gt;&lt;/div&gt;\n</code></pre>\n\n<p>SCRIPT:</p>\n\n<pre><code> $("#myStatic").bind("click", function(){\n      $("#myNewTxt").val($("#myStatic").text());\n      $("#myStatic,#myEdit").toggle();\n });\n $("#myOk").click(function(){\n      $("#myStatic").text($("#myNewTxt").val());\n      $("#myStatic,#myEdit").toggle();\n });\n $("#myX").click(function(){\n      $("#myStatic,#myEdit").toggle();\n });\n</code></pre>\n'}, {'answer_id': 30016, 'author': 'Neall', 'author_id': 619, 'author_profile': 'https://Stackoverflow.com/users/619', 'pm_score': 0, 'selected': False, 'text': '<p>Maybe you\'re not getting an exact match because the browser is lower-casing the entity or something. Try using a carat (^) and lower-case "v" just for testing.</p>\n\n<p>Edited - My first theory was plain wrong.</p>\n'}, {'answer_id': 30020, 'author': 'jelovirt', 'author_id': 2679, 'author_profile': 'https://Stackoverflow.com/users/2679', 'pm_score': 5, 'selected': True, 'text': '<p>When the HTML is parsed, what JQuery sees in the DOM is a <code>UPWARDS DOUBLE ARROW</code> ("⇑"), not the entity reference. Thus, in your Javascript code you should test for <code>"⇑"</code> or <code>"\\u21d1"</code>. Also, you need to change what you\'re switching to:</p>\n\n<pre><code>function expandCollapse(id) {\n    var arrow = $("#"+id+" span").html();\n    if(arrow == "\\u21d1") {     \n        $("#"+id+" span").html("\\u21d3");                           \n    } else {            \n        $("#"+id+" span").html("\\u21d1");                           \n    }\n}\n</code></pre>\n'}, {'answer_id': 30033, 'author': 'travis', 'author_id': 1414, 'author_profile': 'https://Stackoverflow.com/users/1414', 'pm_score': 2, 'selected': False, 'text': '<p>If you do an alert of <code>arrow</code> what does it return? Does it return the exact string that you\'re matching against? If you are getting the actual characters <code>\'⇓\'</code> and <code>\'⇑\'</code> you may have to match it against <code>"\\u21D1"</code> and <code>"\\u21D3"</code>.</p>\n\n<p>Also, you may want to try <code>&amp;#8657;</code> and <code>&amp;#8659;</code> since not all browsers support those entities.</p>\n\n<p><strong>Update</strong>: here\'s a fully working example:\n<a href="http://jsbin.com/edogop/3/edit#html,live" rel="nofollow noreferrer">http://jsbin.com/edogop/3/edit#html,live</a></p>\n\n<pre><code>window.expandCollapse = function (id) {   \n  var $arrowSpan = $("#" + id + " span"),\n      arrowCharCode = $arrowSpan.text().charCodeAt(0);\n\n  // 8659 is the unicode value of the html entity\n  if (arrowCharCode === 8659) {\n    $arrowSpan.html("&amp;#8657;");                           \n  } else {            \n    $arrowSpan.html("&amp;#8659;");                           \n  }\n\n  // one liner:\n  //$("#" + id + " span").html( ($("#" + id + " span").text().charCodeAt(0) === 8659) ? "&amp;#8657;" : "&amp;#8659;" );\n};\n</code></pre>\n'}, {'answer_id': 30039, 'author': 'Juan', 'author_id': 550, 'author_profile': 'https://Stackoverflow.com/users/550', 'pm_score': 1, 'selected': False, 'text': '<p>Use a class to signal the current state of the span. \nThe html could look like this</p>\n\n<pre><code>&lt;h3 id="headerId"&gt;&lt;span class="upArrow"&gt;&amp;uArr;&lt;/span&gt;Header title&lt;/h3&gt;\n</code></pre>\n\n<p>Then in the javascript you do</p>\n\n<pre><code>$( \'.upArrow, .downArrow\' ).click( function( span ) {\n    if ( span.hasClass( \'upArrow\' ) )\n        span.text( "&amp;dArr;" );\n    else\n        span.text( "&amp;uArr;" );\n    span.toggleClass( \'upArrow\' );\n    span.toggleClass( \'downArrow\' );\n} );\n</code></pre>\n\n<p>This may not be the best way, but it should work. Didnt test it tough</p>\n'}]
['https://Stackoverflow.com/questions/30003', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/2138/']