Change icon on click (toggle)

jquery, twitter-bootstrap

Solution

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

Problem

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.

Original source