I am using bulma and vuejs, i want to have three bulma accordions. Namely, Accordion1 and Accordion2, Accordion3. I am able to make the three accordions simultaneously. But now i would like to display Accordion1 at first and have a Button inside it, which on click accordion1 should close and accordion2 should be displayed automatically, similarly for accordion2 i want to have a button inside , which onClick closes accordion2 and displays accordion3. I do not want to hide the preceding accordion. So that when the user reaches accordion3 , all the accordions are visible. how can i achieve this?
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion1</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion2</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion3</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
For Bulma + Vue, i would suggest Buefy
with its Collapse with Accordion effect
(doc link here). Basically you just need to use v-for
loop for indexing, and trigger click event per button according index (e.g to open 2nd after click Btn1, make condition open to index 1 (starts from 0 in array), and open 0 and 1 indexes for Btn3 click)
Hope this helps.