Change icon on click (toggle)

Question

I have a simple script in jquery to toggle a div (show and hide) when a <p> is clicked (I'm using bootstrap).

HTML:

<p id="click_advance"><i class="icon-circle-arrow-down"></i> Advanced search</p> <div id="display_advance">     <p>This is the advance search</p> </div> 

JS:

$('#click_advance').click(function(){ $('#display_advance').toggle('1000'); $(this).html('<i class="icon-circle-arrow-up"></i> Advanced search'); 

});

So, when I click for the first time the icon changes from down to up but obviously when I click "click_advance" again the icon doesn't change back. So I want the toggle effect like the show and hide; but I'm cluless on how to do it with an icon.

Answer 1

Instead of overwriting the html every time, just toggle the class.

$('#click_advance').click(function() {     $('#display_advance').toggle('1000');     $("i", this).toggleClass("icon-circle-arrow-up icon-circle-arrow-down"); });