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

  });
});

If the .btn is inside or next to the .row-offcanvas, I'd just use CSS. — T.J. Crowder
– T.J. Crowder, Commented Dec 29, 2014 at 17:33

Roko C. Buljan · Accepted Answer · 2017-11-24 18:40:38Z

18

.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.

edited Nov 24, 2017 at 18:40

answered Dec 29, 2014 at 17:31

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Roko C. Buljan Over a year ago

@T.J.Crowder did that already ;) But sure, smaller = more fun :)

T.J. Crowder Over a year ago

Or even: pastie.org/9803880 But that's a pain to debug. :-) Your edit just now is absolutely how I'd do it.

Nicola Ferraro · Accepted Answer · 2014-12-29 17:31:43Z

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

answered Dec 29, 2014 at 17:31

Nicola Ferraro

4,2196 gold badges32 silver badges61 bronze badges

Comments

Ionică Bizău · Accepted Answer · 2014-12-29 17:33:11Z

1

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

answered Dec 29, 2014 at 17:33

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

Comments

gregdevs · Accepted Answer · 2014-12-29 17:37:00Z

1

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/

answered Dec 29, 2014 at 17:37

gregdevs

7132 gold badges11 silver badges38 bronze badges

Comments

David Pena · Accepted Answer · 2017-08-25 20:27:23Z

0

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

answered Aug 25, 2017 at 20:27

David Pena

1833 silver badges9 bronze badges

Collectives™ on Stack Overflow

Detecting class toggle in jQuery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related