Vue Collapsible Panel is an easy-to-use, customizable collapsible/foldable panel/accordion library created with Vue3.
expand and collapse in html with icon, expandcollapse html code, expand and collapse div using javascript example, css expandcollapse div example, bootstrap collapse panel
How to make use of it:
Install and download:
# NPM $ npm i @dafcoe/vue-collapsible-panel
1. Import a folding panel library.
// Locally import { VueCollapsiblePanelGroup, VueCollapsiblePanel, } from '@dafcoe/vue-collapsible-panel' // Globally import VueCollapsiblePanel from '@dafcoe/vue-collapsible-panel' const app = createApp(App) app.use(VueCollapsiblePanel).mount('#app') // Stylesheet import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'
2. Add content to collapsible panels.
<vue-collapsible-panel-group> <vue-collapsible-panel> <template #title> Panel 1 Title </template> <template #content> Panel 1 Content </template> </vue-collapsible-panel> <vue-collapsible-panel> <template #title> Panel 2 Title </template> <template #content> Panel 2 Content </template> </vue-collapsible-panel> <vue-collapsible-panel> <template #title> Panel 3 Title </template> <template #content> Panel 3 Content </template> </vue-collapsible-panel> </vue-collapsible-panel-group>
3. Props available for the VueCollapsiblePanelGroup component.
accordion: { type: Boolean, default: false, // accordion mode }, baseColor: { type: String, default: '#333333', },
4. The available property allows you to specify whether the panel should expand when the page is loaded.
expanded: { type: Boolean, default: true, },
Collapsible Panel Library, vue collapsible panel Plugin/Github, html expand collapse text without javascript
See Demo And Download
Official Website(dafcoe): Click Here
This superior jQuery/javascript plugin is developed by dafcoe. For extra advanced usage, please go to the official website.
Be First to Comment