<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>

Check out the
.toggle()
effect.
Here is something similar i was playing with earlier.
HTML:
```
```
<div id="inplace">
<div id="myStatic">Hello World!</div>
<div id="myEdit" style="display: none">
<input id="myNewTxt" type="text" />
<input id="myOk" type="button" value="OK" />
<input id="myX" type="button" value="X" />
</div></div>
```
```
SCRIPT:
```
```
$("#myStatic").bind("click", function(){
      $("#myNewTxt").val($("#myStatic").text());
      $("#myStatic,#myEdit").toggle();
 });
 $("#myOk").click(function(){
      $("#myStatic").text($("#myNewTxt").val());
      $("#myStatic,#myEdit").toggle();
 });
 $("#myX").click(function(){
      $("#myStatic,#myEdit").toggle();
 });
```
```