Detecting class toggle in jQuery

Question

I am trying to do an off-canvas sidebar and I am using the .toggleClass function to make it active or not. When it is active I would like the button (.btn) to say "hide" and when it is not say "show". I have already tried to do an if statement and it has failed. I have also looked at other stackoverflow questions with no success. Can anybody help with how to detect a class has been toggled or not?

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');

    // if active "hide"
    $('.btn').html("HIDE");

    // if not active "show"
    $('.btn').html("SHOW");

  });
});

Answer 1

.hasClass('someClass') will help you to retrieve a boolean true/false

^{api.jquery.com/hasclass:} Determine whether any of the matched elements are assigned the given class. The .hasClass() method will return true if the class is assigned to an element

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    $('.row-offcanvas').toggleClass('active');
    var act = $('.row-offcanvas').hasClass("active");

    if(act){
       $('.btn').html("HIDE");
    }else{
       $('.btn').html("SHOW");
    }
  });
});

a shorter way using a Conditional Operator (AKA Ternary operator) would be:

$(function() {  // DOM ready

   $('[data-toggle="offcanvas"]').on("click", function () {
     var $row = $('.row-offcanvas').toggleClass('active');
     $('.btn').html($row.hasClass("active") ? "HIDE" : "SHOW");
   });

});

Also I have to warn you that by selecting elements like $(".btn") will alter every single .btn element on the page. Make always sure to use the right selectors with the help of .find() (or similar Selector methods). for specificity sake.

Answer 2

You should have another way to select your objects, for example by id, as follows:

$("#myid")...

Then you can use the hasClass function (http://api.jquery.com/hasclass/) to verify if the class has already been added to the object.

$("#myid").hasClass("xxx")