Quasar Collapsibles allow the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on.
You can group multiple Collapsibles to act as an Accordion, which is to open only one Collapsible at a time while closing the others automatically. For this, use
group Vue property and specify a unique name within the Vue parent container of the Collapsibles.
You can add
item-delimiter class on the list
<div> element if you want separators between Collapsibles.
Collapsible items can be opened by default:
|Boolean||Control if Collapsible is opened or not.|
|String||Icon to use. Either use an icon, image or avatar.|
|String||URL to image to use. Either use an icon, image or avatar.|
|String||URL to avatar to use. Either use an icon, image or avatar.|
|String||Label besides icon, image or avatar.|
|Boolean||Allows user to toggle open/close state by clicking/tapping only on the Collapsible icon on the right.|
|String||Unique name which allows to group multiple Collapsible so they work as an Accordion.|
|Toggle open/close state.|
Be creative. In the example below we’re using a Card as Collapsible content.