Can I specify multiple data targets for Twitter Bootstrap collapse?

Question

I\'d like to target two divs for expand when clicking on a single trigger? Is that possible?

Answer 1

The data-target answer did not work for me. However you can use JavaScript to do this.

Make your button call some JavaScript like:

$('.collapse-class').collapse('toggle')

See: https://getbootstrap.com/javascript/#via-javascript-3.

Answer 2

Use the same class for both div's and set your data-target according this. Give your div's also the same parent (can also be a class) and set data-parent according this.

<button type="button" class="btn btn-danger" data-parent="#wrap" data-toggle="collapse" data-target=".demo">
      simple collapsible
    </button>
    <div id="wrap">
    <div class="demo collapse">
    test1
    </div>
    <div class="demo collapse">
    test1
    </div>
    </div>

Answer 3

If you want to hide one element and show another (like the bootstrap accordion but without a panel) you can add multiple targets but also add the class 'in' to have one element expanded on load!

<div class="collapse text-center clearfix in" id="section1">
   <h1>This is section 1</h1>
   <p>Are you excited about toggling?</p>
</div>
<div class="collapse text-center clearfix alert-warning" id="section2">
   <h1>Boo!!</h1>
   <p>This is a new sentence</p>
</div>
<button class="btn btn-block btn-primary" data-toggle="collapse" data-target="#section1,#section2">Toggle</button>

Live demo here

Answer 4

There is a solution in Bootstrap 4:

Bootstrap 4 documentation: Multiple targets

The least you need is:

• data-toggle="collapse" data-target=".multi-collapse" for the toggle button
• class="collapse multi-collapse" for each element you need to toggle

(While multiple ids in data-target indeed don't work).

Answer 5

From the Bootstrap 3 documentation:

The data-target attribute accepts a CSS selector to apply the collapse to.

Therefore you can use a comma-separated list of id's, class selector etc. for the data-target attribute value:

<button class="btn btn-primary" type="button"
    data-toggle="collapse" data-target="#target1,#target2,#target3"
    aria-expanded="false" aria-controls="target1,target2,target3">

You can see an extensive list of valid CSS selectors on the w3schools website.

Answer 6

Bootstrap 4 uses document.querySelector instead of document.querySelectorAll. If this changes, then everything works.