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

Question

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

what is the question? $( "#accordion" ).accordion({ collapsible: true }); or false — Grumpy
– Grumpy, Commented Jun 18, 2014 at 12:18

Arun P Johny · Accepted Answer · 2014-06-18 12:27:43Z

3

Try

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

Demo: Fiddle

edited Jun 18, 2014 at 12:27

answered Jun 18, 2014 at 12:20

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

fuzzybabybunny Over a year ago

That worked. I'm confused why it worked though. There's no .collapse method in jQuery, right? jquery.com/?s=collapse

Arun P Johny Over a year ago

@fuzzybabybunny it is provided by bootstrap collapse plugin

fuzzybabybunny Over a year ago

ahhhhh... I see. Ok, should have read the docs more carefully ><

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related