Accordion

Component name: <v-acccordion-group> + <v-acccordion>

Accordions are useful when you want to toggle between hiding and showing large amount of content

Examples

Basic

Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
Consectetur adipiscing elit sodales
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
<div class="app">
  <v-accordion-group>
    <v-accordion title="Lorem ipsum dolor sit">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
    </v-accordion>
    <v-accordion title="Consectetur adipiscing elit sodales">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sodales, nibh eget venenatis vulputate, magna nisi tempus mi, nec congue ante lectus sed purus. Mauris consequat iaculis feugiat. Integer scelerisque condimentum urna, eu suscipit velit. In id nibh enim. Sed non rutrum velit. Suspendisse nec lorem eget dolor bibendum posuere. Sed tincidunt dolor sed nibh vestibulum, vitae molestie nibh lacinia. Phasellus sed ornare libero. Ut ac rhoncus tortor. Curabitur tempor enim ligula, sit amet vehicula ante egestas a. Donec et sollicitudin erat, sed pharetra libero. Aliquam quis ipsum non urna sollicitudin consequat.
    </v-accordion>
  </v-accordion-group>
</div>
1
2
3
4
5
6
7
8
9
10

Components

v-accordion-group

Wrapper component for accordions.

v-accordion

API

Name Type Description Default
title String Set the title of the accordion header -

Notice

All other properties that are not defined above, will be passed to the component as html attributes. This is especially useful for adding the class attribute.