Collapse

An easy way to toggle what you want

Examples

Base

Show code

HTML

<section>
    <o-collapse :open="false" aria-id="contentIdForA11y1">
        <template #trigger>
            <o-button
                label="Click me!"
                variant="primary"
                aria-controls="contentIdForA11y1" />
        </template>
        <div class="notification">
            <h3>Subtitle</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                <br />
                Nulla accumsan, metus ultrices eleifend gravida, nulla nunc
                varius lectus, nec rutrum justo nibh eu lectus. <br />
                Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
                erat vel, interdum mattis neque.
            </p>
        </div>
    </o-collapse>
</section>

Accordion

Show code

HTML

<section>
    <o-collapse
        v-for="(collapse, index) of collapses"
        :key="index"
        class="card"
        animation="slide"
        trigger-class="trigger-fullwidth"
        :open="isOpen == index"
        @open="isOpen = index">
        <template #trigger="props">
            <div class="card-header" role="button">
                <span class="card-header-title">
                    {{ collapse.title }}
                </span>

                <a class="card-header-icon">
                    <o-icon :icon="props.open ? 'caret-up' : 'caret-down'">
                    </o-icon>
                </a>
            </div>
        </template>

        <div class="card-content">
            <p class="content" v-html="collapse.text" />
        </div>
    </o-collapse>
</section>

<br />

<section>
    <article v-for="(collapse, index) of collapses" :key="index">
        <o-collapse
            animation="slide"
            :open="isOpenAgain == index"
            @update:open="isOpenAgain = index">
            <template #trigger>
                <o-button variant="success" :label="collapse.title" />
            </template>

            <div class="card">
                <p class="card-content" v-html="collapse.text" />
            </div>
        </o-collapse>
    </article>
</section>

JS

import { ref } from "vue";

const isOpen = ref(0);
const isOpenAgain = ref(0);

const collapses = ref([
    {
        title: "Open to read something intersting written for you!",
        text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
          Nulla accumsan, metus ultrices eleifend gravida,   <br />
          nulla nunc varius lectus, nec rutrum justo nibh eu lectus.  <br />
          Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.`,
    },
    {
        title: "What the different between Oruga and Buefy?",
        text: "Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br />",
    },
    {
        title: "Nothing special, ignore it!",
        text: "Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.",
    },
]);

SCSS

.card {
    position: relative;
    background-color: #fff;
    box-shadow:
        0 2px 3px hsla(0, 0%, 4%, 0.1),
        0 0 0 1px hsla(0, 0%, 4%, 0.1);
}

.card-header {
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px hsla(0, 0%, 4%, 0.1);
}

.card-header-title {
    flex-grow: 1;
    font-weight: 700;
    padding: 0.75rem;
}

.card-header-icon {
    cursor: pointer;
    padding: 0.75rem;
}

.card-content {
    padding: 1.5rem;
}

.trigger-fullwidth {
    width: 100%;
}

Class props

'Classes applied to the element'

Collapse component

An easy way to toggle what you want

<o-collapse></o-collapse>

Props

Prop name	Description	Type	Values	Default
animation	Custom animation (transition name)	string	-	From config: collapse: {   animation: "fade" }
contentId	Id property of the content container	string	-	Default function (see source code)
open	Whether collapse is open or not, use v-model:open to make it two-way binding	boolean	-	true
override	Override existing theme classes completely	boolean	-
position	Trigger position	"top" | "bottom"	top, bottom	From config: collapse: {   position: "top" }

Events

Event name	Properties	Description
update:open	value boolean - updated open prop	open prop two-way binding
open		on collapse opened
close		on collapse closed

Slots

Name	Description	Bindings
trigger	Define the collapse trigger	open boolean - collapse open state
default	Default content

Sass variables

Current theme ➜ Oruga

SASS Variable	Default

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

The theme does not have any custom variables for this component.