Question

I have a question about resetting the state of an active tab class if another tab is clicked. The code below toggles the class as expected to show a different tab color image however if I click another tab, both tabs are displaying as active.

My question is what do I need to add to reset the active tab back to its default state and activate the newly clicked tab to the active state.

$(document).ready(function(){
    $('.slide-out').each(function(){
        var $this = $(this);
        var defaultPos = roundValue($this.css('left'));

        $('.tab', $this).on('click', function(){
            var tab = $(this);                                                                              
            var goTo = tab.attr('slide-To');
            var currentPos = roundValue($this.css('left'));

            if(goTo == currentPos){
               goTo = defaultPos;
            }                                       

            $this.animate({'left': goTo}, 'slow');  
            $(this).toggleClass('handle2-selected');                                    
        });
    });
});

Answer 1

you should toggle the class on previous tab also as you are doing for the next tab.
or you can write my this code before starting animation.

$('.tab').removeClass('handle2-selected');