This has been troubling me for some time now.

Can someone please help me figure out how to build multiple Bootstrapvue.js collapses that open and close individually. In fact, the opening and closing individually already works, as that comes out of the box. I’d like the Open and Close all buttons to open all or close all collapses when pressed at any point.

https://codepen.io/akolinski/pen/ZNKraN

new Vue({
el: “#app”,
data: {
showCollapse: false
}
});
<link href=”https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel=”stylesheet”/>
<script src=”https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id=’app’>
<div class=”row”>
<div class=”col-12 mt-2”>

<h1>vue.js with Bootstrapvue.js collapse and open and close all buttons</h1>
<p class=”lead”>The purpose of this pen is to build multiple Bootstrapvue.js collapses that open and close individually. However we want the Open and Close all buttons to open all or close or collapses when pressed.</p>
<hr>

<div class=”row my-3”>
<div class=”col-12”>
<b-button class=”mr-2” @click=”showCollapse = true”>Open all</b-button>
<b-button @click=”showCollapse = false”>Close all</b-button>
</div>
</div>

<div class=”row mb-4”>
<div class=”col-12”>
<b-button v-b-toggle.collapse-1 variant=”primary”>Toggle Collapse 1</b-button>
<b-collapse id=”collapse-1” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse 1 contents Here</p>
</b-card>
</b-collapse>
</div>
</div>

<div class=”row mb-4”>
<div class=”col-12”>
<b-button v-b-toggle.collapse-2 variant=”primary”>Toggle Collapse 2</b-button>
<b-collapse id=”collapse-2” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse 2 contents Here</p>
</b-card>
</b-collapse>
</div>
</div>

<div class=”row”>
<div class=”col-12”>
<b-button v-b-toggle.collapse-3 variant=”primary”>Toggle Collapse 3</b-button>
<b-collapse id=”collapse-3” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse 3 contents Here</p>
</b-card>
</b-collapse>
</div>
</div>

</div>
</div>
</div>

Solution :

Thanks to the Bootstrapvue.js community on discord. We came up with this CodePen to show the correct functionality.

Credit: Hiws#0325

https://codepen.io/Hiws/pen/MdvPEX

new Vue({
el: “#app”,
data: {
collapses: [
{ show: false },
{ show: false },
{ show: false }
]
},
methods: {
openAll() {
this.collapses.forEach(collapse => {
collapse.show = true
})
},
closeAll() {
this.collapses.forEach(collapse => {
collapse.show = false
})
}
}
});
<link href=”https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel=”stylesheet”/>
<link href=”https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel=”stylesheet”/>
<script src=”https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src=”https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id=’app’>
<div class=”row”>
<div class=”col-12 mt-2”>
<h1>vue.js with Bootstrapvue.js collapse and open and close all buttons</h1>
<p class=”lead”>The purpose of this pen is to build multiple Bootstrapvue.js collapses that open and close individually. However we want the Open and Close all buttons to open all or close or collapses when pressed.</p>
<hr>

<div class=”row my-3”>
<div class=”col-12”>
<b-button class=”mr-2” @click=”openAll”>Open all</b-button>
<b-button @click=”closeAll”>Close all</b-button>
</div>
</div>

<div class=”row mb-4” v-for=”(collapse, index) in collapses” :key=”index”>
<div class=”col-12”>
<b-button @click=”collapse.show = !collapse.show” variant=”primary”>Toggle Collapse { index + 1 }</b-button>
<b-collapse v-model=”collapse.show” id=”collapse-1” class=”mt-2”>
<b-card>
<p class=”card-text”>Collapse { index + 1 } contents Here</p>
</b-card>
</b-collapse>
</div>
</div>
</div>
</div>
</div>