data: function () {
return {
show: false,
};
},
methods: {
toggleItem: function () {
this.show = !this.show;
},
},
<div class="wrapper">
<div class="accordion">
<input type="checkbox" @click="toggleItem" />
<h2 class="title">
<slot name="title"></slot>
</h2>
</div>
<div v-show="show" class="content">
<slot name="content"></slot>
</div>
</div>
I want to generate a lines like below, inside of the vue-accordion. every time. When ever user click on each checkbox separately.
So to achieve like above, do i need any other plugins or with css can i achieve that.
Working code snippet:- https://codesandbox.io/s/vue-accordion-component-forked-vwpi8?file=/src/components/Accordion.vue