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