Accordion

Introduction to using the Accordion component

Accordion is usually translated into Chinese as the "accordion" effect. On screen it looks like the motion of playing an accordion, where the hands pull apart and then come together. Accordions are often used on pages like FAQs where the content is too rich, so titles are used first to attract users to click to expand and read, avoiding pages that are too long which can cause users to lose patience and make it hard to jump through the content.

Another common term is Collapse.

Basic usage

<bpa-accordion>
  <bpa-accordion-item>
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

Default opened content

<bpa-accordion>
  <bpa-accordion-item open>
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item open>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

Custom title

<bpa-accordion>
  <bpa-accordion-item title="Custom title text">
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item>
    <template v-slot:title>
      <mark>Custom title Html</mark>
    </template>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

Attributes

Name	Value	Type	Default	Required	Note
id		String	random
title	{ text } or template	String
open		Boolean	false		Expand bpa-accordion-item

Demo