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")

Answer 3

$(document).ready(function () {
  $('[data-toggle="offcanvas"]').click(function () {
    if ($('.row-offcanvas').toggleClass('active').hasClass('active'))
      $('.btn').html("HIDE");
    else 
      $('.btn').html("SHOW");
  });
});

Answer 4

I think you are looking for something like this. You just need to add an if/else statement to check the class

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

  if ($('.row-offcanvas').hasClass('active')){
    $('.btn').html("HIDE");
   }
  else{
   $('.btn').html("SHOW");
   }

 });
});

http://jsfiddle.net/GregWebBandit/Lmfok39k/

Answer 5

You can use javascript by checking the element classList Like this:

var el = document.getElementById("elementId");
el.classList.contains("foo");

More information in Mozilla Docs