CODEWITHSUNDEEP
jquerytwitter-bootstrap
fuzzybabybunny
fuzzybabybunny

Reputation: 5254

How to use jQuery to execute a Bootstrap data-toggle action?

I've got a Bootstrap accordion.

<div class="panel-heading">
  <button type="button" class="btn btn-success col-xs-4" id="more-info-button" data-toggle="collapse" data-target="#collapseOne">
    I want to input more stuff.
  </button>
</div>

<div id="collapseOne" class="panel-collapse collapse">
  <div class="panel-body">
    This is another form field.
  </div>               
</div>

When I click on the #more-info-button I start to execute Bootstrap.js' accordion animation. The class for #collapseOne goes from .collapse to .collapsing to .collapse-in, and vice versa.

I want the same thing to happen, but when I put a checkmark on a checkbox instead:

<div class="checkbox">
  <label>
    <input type="checkbox" name="revealTextInputField" value="">Check me to review another text input field.
  </label>
</div>

The idea is that if a user checks this, an additional form field will drop down via the accordion.

Of course I can do this with jQuery's .toggle or add/remove class methods, but there are 3 different classes and they animate... so I'm not too sure how to go about this.

EDIT

Bootply: http://www.bootply.com/pb1pfUxino

Upvotes: 1

Views: 1491

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('input[name="revealTextInputField"]').change(function(){
    $('#collapseOne').collapse(this.checked? 'show' : 'hide')
})

Demo: Fiddle

Upvotes: 3

Related Questions