Skip to content
On this page

Collapse

Flexible plugin for easy toggle behavior.

Example

Click the button below to show and hide another element.

vue
<template>
  <div>
    <Btn type="primary" @click="show = !show">Click me!</Btn>
  </div>
  <br />
  <Collapse v-model="show">
    <div class="well" style="margin-bottom: 0">Hi there.</div>
  </Collapse>
</template>
<script setup>
import { ref } from 'vue';
import { Collapse, Btn } from 'uiv';

const show = ref(false);
</script>

Accordion

Extend the default collapse behavior to create an accordion with the panel component.

vue
<template>
  <div class="panel-group uiv">
    <div class="panel panel-default">
      <div class="panel-heading" role="button" @click="toggleAccordion(0)">
        <h4 class="panel-title">Collapsible Group Item #1</h4>
      </div>
      <Collapse v-model="showAccordion[0]">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
          skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
        </div>
      </Collapse>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" role="button" @click="toggleAccordion(1)">
        <h4 class="panel-title">Collapsible Group Item #2</h4>
      </div>
      <Collapse v-model="showAccordion[1]">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
          skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
        </div>
      </Collapse>
    </div>
    <div class="panel panel-info">
      <div class="panel-heading" role="button" @click="toggleAccordion(2)">
        <h4 class="panel-title">Collapsible Group Item #3</h4>
      </div>
      <Collapse v-model="showAccordion[2]">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
          terry richardson ad squid. 3 wolf moon officia aute, non cupidatat
          skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
        </div>
      </Collapse>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { Collapse } from 'uiv';

const showAccordion = ref([true, false, false]);

function toggleAccordion(index) {
  if (showAccordion.value[index]) {
    showAccordion.value[index] = false;
  } else {
    showAccordion.value = showAccordion.value.map((v, i) => i === index);
  }
}
</script>

API Reference

Collapse

Props

NameTypeDefaultRequiredDescription
v-modelBooleanfalseShow / hide the component.
tagStringdivThe HTML tag that render the collapse component.
transitionNumber350Collapse transition speed. Use 0 to disable transition.

Slots

NameDescription
defaultReplace as the collapse body.

Events

NameParamsDescription
showThis event fires immediately when the v-model prop is set to true.
shownThis event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
hideThis event is fired immediately when the v-model prop is set to false.
hiddenThis event is fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).

Released under the MIT License.