CODEWITHSUNDEEP
jquerytwitter-bootstrap
fedejp
fedejp

Reputation: 970

Change icon on click (toggle)

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.

Upvotes: 38

Views: 173380

Answers (6)

Manish N
Manish N

Reputation: 1

$("#togglebutton").click(function () {
  $(".fa-arrow-circle-left").toggleClass("fa-arrow-circle-right");
}

I have a button with the id "togglebutton" and an icon from FontAwesome . This can be a way to toggle it . from left arrow to right arrow icon

Upvotes: 0

Edward Moffett
Edward Moffett

Reputation: 1056

If your icon is based on the text in the block (ligatures) rather the class of the block then the following will work. This example uses the Google Material Icons '+' and '-' icons as part of MaterializeCSS.

<a class="btn-class"><i class="material-icons">add</i></a>

$('.btn-class').on('click',function(){
    if ($(this).find('i').text() == 'add'){
        $(this).find('i').text('remove');
    } else {
        $(this).find('i').text('add');
    }
});

Edit: Added missing ); needed for this to function properly.

It also works for JQuery post 1.9 where toggling of functions was deprecated.

Upvotes: 9

Kevin B
Kevin B

Reputation: 95058

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

Upvotes: 113

Tj Laubscher
Tj Laubscher

Reputation: 205

Here is a very easy way of doing that 

 $(function () {
    $(".glyphicon").unbind('click');
    $(".glyphicon").click(function (e) {
        $(this).toggleClass("glyphicon glyphicon-chevron-up glyphicon glyphicon-chevron-down");
});

Hope this helps :D

Upvotes: 2

monxas
monxas

Reputation: 2657

Try this:

$('#click_advance').click(function(){
  $('#display_advance').toggle('1000');
  icon = $(this).find("i");
  icon.hasClass("icon-circle-arrow-down"){
    icon.addClass("icon-circle-arrow-up").removeClass("icon-circle-arrow-down");
  }else{
    icon.addClass("icon-circle-arrow-down").removeClass("icon-circle-arrow-up");
  }
})

or even better, as Kevin said:

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

Upvotes: 7

Mollo
Mollo

Reputation: 723

If .toggle is not working I would do the next:

var flag = false;
$('#click_advance').click(function(){
    if( flag == false){
       $('#display_advance').show('1000');
         // Add more code
       flag = true;
    }
    else{
       $('#display_advance').hide('1000');
       // Add more code
       flag = false;
    }
}

It's a little bit more code, but it works

Upvotes: 4

Related Questions