Changing Bootstrap Glyphicon on click
<p>I'm wanting to swap the second class of Bootstraps 'glyphicon' span, but instead of toggling the class, It's adding it behind, thus not changing the class at all. </p>

<p>I'm new(ish) to jQuery / Javascript and I just can't get my head around this.</p>

<p>Heres the </p>

<pre><code>&lt;nav class="navbar navbar-top" style="position:fixed; width:100%;"&gt;
&lt;a class="navbar-brand" href="#"&gt;Project name&lt;/a&gt;
&lt;a class="navbar-brand" href="#" style="float:right;"&gt;
    &lt;span class="glyphicon glyphicon-tasks" id="whiter"&gt;&lt;/span&gt;
&lt;/a&gt;
</code></pre>

<p></p>

<p>And the script is below:</p>

<pre><code>$('.glyphicon').click(function(){
$(this).toggleClass('glyphicon-chevron-up');
</code></pre>

<p>I get all the classes instead of just glyphicon-chevron-up, Im getting:</p>

<pre><code>&lt;span class="glyphicon glyphicon-tasks glyphicon-chevron-up"&gt;&lt;/span&gt;
</code></pre>

<p>Removing the glyphicon-tasks class on Element inspect displays the Chevron, so some how it is being blocked and the tasks glyph isnt being swapped.</p>