JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/uiv.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
<div class="col-sm-6">
<ul class="list-group cust_list_group list-unstyled">
<li v-for="(task,index) in taskList">
<div class="checkbox cust_checkbox">
<label for="01">
{{task.name}}
</label>
<div class="btn-group pull-right">
<button type="button" @click="toggleAccordion(index)" class="btn btn-xs btn-primary mar">+</button>
</div>
<div class="clearfix"></div>
</div>
<collapse v-model="showAccordion[index]">
<div class="panel-body" style="background:#f5f5f5;">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</collapse>
</li>
</ul>
</div>
</div>
JavaScript
new Vue({
el: '#app',
components: {
Collapse: uiv.Collapse
},
data:{
showCollapse1: false,
showAccordion: [],
showNavbar: false,
finishedList: [],
taskList:[{
name:"Call customer",
finished:false
},
{
name:"Enrich data",
finished:false
},
{
name:"Establish contact with decision maker",
finished:false
},
{
name:"Establish if SME or Corporate",
finished:false
}]
},
methods:{
toggleAccordion (index) {
if (this.showAccordion[index]) {
this.showAccordion[index] = false
} else {
for (let i = 0; i < this.showAccordion.length; i++) {
this.showAccordion[i] = false
}
this.showAccordion[index] = true
}
this.showAccordion = this.showAccordion.map(v => v)
}
}
})