CODEWITHSUNDEEP
jquery
Federico
Federico

Reputation: 319

Button class switch in jQuery

Using jQuery I want to switch class button when user click on it. This is the button code I have right now

<button type="button" class="btn btn-success btn-bordered" id="toggle-job">Grab this work</button>

Below the code to handle the button click

$('#toggle-job').click(function(e){
    if ( $( this ).hasClass( "btn-success" ) ) {
        $( this ).removeClass( "btn-success" ).addClass( "btn-custom" );
        $( this ).text("Drop this work");
    };
    if ( $( this ).hasClass( "btn-custom" ) ) {
        $( this ).removeClass( "btn-custom" ).addClass( "btn-success" );
        $( this ).text("Grab this work");
    };
    $( "#action-box" ).toggle();
    $( "#photoCrop" ).toggle();
});

The toggle code works properly...so the related divs show or hide I'm pretty sure I'm doing some silly error...but I'm not able to figure out what I'm doing wrong. Thanks a lot for any suggestion

Upvotes: 0

Views: 45

Answers (1)

twain
twain

Reputation: 1325

Just change your second if statement to an else if statement, that should work.

Right now your first if case changes the class to btn-custom, but right after that the second if changes it back to btn-success.

Upvotes: 2

Related Questions