CODEWITHSUNDEEP
jquery
JoshTalk
JoshTalk

Reputation: 67

How do I change the Icon when clicking on tabs?

Im having a smallish issue with some tabs, Im trying to change the icon to a minus icon when on it and a plus icon when not on it if thats make sense.

Ive got it to change to a minus button when you click it but it wont change back when you click on another tab.

$('ul.nav-tabs li').click(function(){
    $(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
    $('ul.nav-tabs li:not(active)').removeClass('fa-plus').addClass('fa-minus');
});

enter image description here

any help would be greatly appreciated.

Upvotes: 1

Views: 502

Answers (2)

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

One approach is to remove the minus symbol on all icons, replacing them with the + symbol, then add the minus symbol to only the icon of the li that has been clicked on:

//Store as variable outside the function so we don't have to keep looking them up each
// time any of the li is clicked.
var $tabIcons = $('ul.nav-tabs li i.tabIcon');
$('ul.nav-tabs li').click(function(){

    //remove - from all icons, add +.
    $tabIcons.removeClass('fa-minus').addClass('fa-plus');

    //remove + from this tab icon, add -.
    $(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
});

Upvotes: 2

Gowthaman D
Gowthaman D

Reputation: 579

var selector = '.nav li';

$(selector).on('click', function(){
    $(selector).removeClass('active');
    $(this).addClass('active');
});

http://jsfiddle.net/bvf9u/

Upvotes: 0

Related Questions