GitHub

Accordions

Accordions are used to toggle sections of content.

<!-- standard Accordions example -->
<div class="accordion">
  <input type="checkbox" id="accordion-1" name="accordion-checkbox" hidden>
  <label class="accordion-header" for="accordion-1">
    Title
    <i class="icon icon-accordion ml-2"></i>
  </label>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</div>

<!-- mutually exclusive Accordions example (with same input names) -->
<div class="accordion">
  <input type="radio" id="accordion-1" name="accordion-radio" hidden>
  <label class="accordion-header" for="accordion-1">
    Title
  </label>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</div>

Alternatively, you can use details and summary instead of input radio or checkbox trick. Add the open attribute to details to expand it. Microsoft Edge support is under consideration. 

<!-- details and summary Accordions example -->
<details class="accordion" open>
  <summary class="accordion-header">
    Title
    <i class="icon icon-accordion ml-2"></i>
  </summary>
  <div class="accordion-body">
    <!-- Accordions content -->
  </div>
</details>

Component

You can use the accordion component to quickly add a set of customizable accordions. Add a accordion element inside of the DOM and add any available settings as a prop. Available slots include: header and body. 

<!-- Accordion component example -->
<Accordion name="accordion-radio" 
  :exclusive="true" 
  :scroll-into-view="true">
  <template v-slot:header>
    <h4>Title</h4>
    <i>Lorem ipsum dolor sit amet</i>
  </template>
  <template v-slot:body>
    <!-- Accordions content -->
  </template>
</Accordion>

props

  • name - default: unique name string. Optional input name, useful for mutually exclusive Accordions
  • id - default: unique id string. Optional input id
  • exclusive - default: false. Set to true for mutually exclusive Accordions (with same input names)
  • scroll-into-view - default: false. Set to true for auto scroll to top of current accordion when expanded

events

  • expanded - Event emitted when accordion finishes expanding.
  • collapsed - Event emitted when accordion finishes collapsing.

slots

  • header - The slot for adding content to the accordion header.
  • body - The slot for adding content to the accordion body.

Checkout out the Javascript page for more information on how to setup a custom component.