Search code examples
javascriptvue.jsaccordionbuttonclickbulma

Using bulma accordions, out of two accordions , how to display the later accordion , on click of a button inside the former accordion?


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>

Solution

  • 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.