# Collapse
Collapse
component can be used whenever you need to toggle visibility of element. Collapse component itself is just
a functional div which will make your content which you pass inside Collapse
collapsible.
There are 2 ways to control your collapse elements: with v-collapse
directive and custom id
, or with a direct collapse
component instance ref
and utilizing open
, close
or toggle
functions.
# Using collapse with v-collapse
directive
In order to toggle your collapse
component automatically when another element is clicked, you can use v-collapse
directive
and provide unique id
prop to your collapse
element and same id
to this controller
element where you use v-collapse
directive
<Button v-collapse="collapseIdVariable">Toggle Collapse</Button>
<collapse :id="collapseIdVariable">
<div class="my-4 p-3 bg-success text-white rounded">
<b>A div with collapsed element</b>
<p class=" mb-0">With some nice text which is not lorem ipsum</p>
</div>
</collapse>
<script>
export default {
data(){
return {
collapseIdVariable: 'some-random-generated-id-for-collapse'
}
}
}
</script>
You can also use multiple elements as controllers for your collapse element.
# Using collapse with $refs
and control functions
If you wish to programmatically control the state of collapse
you can reference the collapse instance with ref
and use
open
, close
, or toggle
functions.
<Button @click="$refs['collapse-ref'].toggle()">Toggle Collapse</Button>
<Button @click="$refs['collapse-ref'].open()">Open Collapse</Button>
<Button @click="$refs['collapse-ref'].close()">Close Collapse</Button>
<collapse ref="collapse-ref">
<div class="my-4 p-3 bg-success text-white rounded">
<b>A div with collapsed element</b>
<p class=" mb-0">With some nice text which is not lorem ipsum</p>
</div>
</collapse>
# Events
When Collapse
component changes it's state, it will emit open
event when it is opened or close
event when it is closed.
You can listen to these events to provide additional functionality within your application. These events don't provide any value,
they are used purely as notifiers.
<collapse
@open="openEventListener"
@close="closeEventListener"
>
Some collapsible content
</collapse>
<script>
export default {
methods:{
openEventListener:()=>{
// Do something
},
closeEventListener:()=>{
// Do something
},
}
}
</script>
# Props
name | description | required | type |
---|---|---|---|
id | Unique id for collapse | false | String |
showInitially | If set to true - collapse content will be shown initially | false | Boolean |