Question

Ok not sure whats going on the code does toggle class, but when you click it again it is well seen that the class is removed however the text remains the same “Locked…” and is not changed back to the original.

Here is the jQuery code

$("#sprv").click(function() {
                 $(this).toggleClass('btn_active');

                 $(".prv").text("Make private?");

                 }, function(){

                 $(this).toggleClass('btn_active');

                 $(".prv").text("Locked...");
});

<span class="prv">Make private?</span>

Can some one tell me what I am doing wrong and how to fix this. Thanks in advance

Answer 1

You are passing two functions into the click handler. You can’t do that (it is interpreting the first function as the eventdata, and the second function as the handler — see http://api.jquery.com/click/). You need to pass just one event handler. It can deal with both cases though, like this:

$('#sprv').click(function() {
    $(this).toggleClass('btn_active');
    $('.prv').text($(this).hasClass('btn_active') ? 'Locked...' : 'Make private?');
});

First it toggles the class, then it uses jQuery.hasClass() to determine if it has the btn_active class. It always updates the text, but it uses a value according to the state (determined from the just-toggled class).