Press "Enter" to skip to content

Collapsible Panel / Accordion Component Using Vue3

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *