CODEWITHSUNDEEP
javascriptjqueryhtmlbuttontoggle
StackThis
StackThis

Reputation: 883

Toggle Class on Div when Button has Class .active?

I have a checkbox button that toggles to .active <div class="btn thisBtn active">:

<div class="btn-group" data-toggle="buttons">
  <label class="btn thisBtn">
    <input type="checkbox"> This
  </label>
  <label class="btn thatBtn">
    <input type="checkbox"> That
  </label>
</div>

And I would like that active state to trigger a class toggle on <div class="thisDiv hidden">

$( function() {
  if ( $( ".thisBtn" ).is( ".active" ) ) {
      $( ".thisDiv" ).removeClass( "hidden" );
      $( ".thisDiv" ).addClass( "show" );
  } else {
      $( ".thisDiv" ).removeClass( "show" );
      $( ".thisDiv" ).addClass( "hidden" );
  }
});

Upvotes: 0

Views: 705

Answers (1)

Mike Grabowski
Mike Grabowski

Reputation: 1965

You can change your snippet to listen to checkbox change instead of removing/adding classes to perform less jQuery operations.

 $("#checkbox").change(function() {
       $("#checkbox-show").toggle(); 
    });

The HTML markup would be something like this:

<div class="btn-group" data-toggle="buttons">
  <label class="btn thisBtn">
    <input type="checkbox" id="checkbox"> This
  </label>
  <label class="btn thatBtn">
    <input type="checkbox"> That
  </label>
</div>

<div id="checkbox-show" style="display:none;">On checkbox select</div>

If you are displaying the form by using templating engine, you can set #checkbox-show to have display:block on load, only when #checkbox is checked. If not, just perform simple if statement to show/hide div with jQuery only once, on document ready.

Upvotes: 1

Related Questions