remove a class if already exists by using toggleClass

Question

How to remove a class if already exists by using toggleClass

$('.mobile_billing').toggleClass('open');

I've a scenario where we use above code to expand and collapse the accordion. There are two options to collapse and expand:

From Accordion arrow
From Check BOX.

When user clicks on Check Box and Accordion is already expanded No action is required. Where as if Accordion is in Collpase state, would like to open it.

I tried above code, it either opens or close. It doesn't check if already open. Can someone please help

We'd need more code to catch your bug. A `this` is probably missing... — Denys Séguret, May 15 '14 at 12:02
try using another attribute such as `rel` and change its value to collapsed or expanded — Dev Man, May 15 '14 at 12:03

score 1 · Accepted Answer · answered May 15 '14 at 12:05

You need to write two seperate events for checkbox and accordian

suppose checkbox id=checkbox

$("#checkbox").click(function(){      
   if(!$('.mobile_billing').hasClass('open')) // it checks if mobile_billing is not open
     $('.mobile_billing').addClass('open');
});

And suppose accordian has id=accordian

 $("#accordian").click(function(){

         $('.mobile_billing').addClass('open');
 });

score 0 · Answer 2 · answered May 15 '14 at 12:16

When click on the checkbox check for the Accordion is open or not if if is in open state return from the function. otherwise do toggle action.

$('#checkboxId').on('click',function(){
  if($('.mobile_billing').hasClass('open')) return;

  $('.mobile_billing').toggleClass('open');
})

score 0 · Answer 3 · edited May 23 '17 at 12:21

You can do:

$( '.accordion_checkbox' ).click( function() { 
  $( '.mobile_billing' ).toggleClass( 'open', this.checked );
});

So 'open' only gets added when the checkbox is checked and removed when it's unchecked by the user. It's irrelevant whether it's open already when the user clicks on the checkbox; it'll just stay open. This is using jQuery.toggleClass's switch option and checking the checked (boolean) value of the checkbox you've attached the click event to.

remove a class if already exists by using toggleClass

3 Answers3