Collapse

An easy way to toggle what you want

---

edit on github

Examples

<template>
  <section>
    <o-collapse :open="false" aria-id="contentIdForA11y1">
      <template #trigger="props">
        <o-button variant="primary" aria-controls="contentIdForA11y1" :aria-expanded="props.open">Click me!</o-button>
      </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>
</template>

<script>
  export default {}
</script>

Accordion

<template>
  <section>
    <o-collapse class="card" animation="slide" v-for="(collapse, index) of collapses" :key="index" :open="isOpen == index" @open="isOpen = index">
      <template #trigger="props">
        <div class="card-header" role="button" :aria-controls="'contentIdForA11y5-' + index" :aria-expanded="isOpen">
          <p class="card-header-title">
            {{ collapse.title }}
          </p>
          <a class="card-header-icon">
            <o-icon :icon="props.open ? 'caret-up' : 'caret-down'"> </o-icon>
          </a>
        </div>
      </template>
      <div class="card-content">
        <div class="content">
          {{ collapse.text }}
        </div>
      </div>
    </o-collapse>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        isOpen: 0,
        collapses: [
          {
            title: 'Title 1',
            text: 'Text 1'
          },
          {
            title: 'Title 2',
            text: 'Text 2'
          },
          {
            title: 'Title 3',
            text: 'Text 3'
          }
        ]
      }
    }
  }
</script>

<style>
  .card {
    background-color: #fff;
    box-shadow: 0 2px 3px hsla(0, 0%, 4%, 0.1), 0 0 0 1px hsla(0, 0%, 4%, 0.1);
    color: #4a4a4a;
    max-width: 100%;
    position: relative;
  }
  .card-header {
    background-color: transparent;
    align-items: stretch;
    box-shadow: 0 1px 2px hsla(0, 0%, 4%, 0.1);
    display: flex;
  }
  .card-header-title {
    align-items: center;
    color: #363636;
    display: flex;
    flex-grow: 1;
    font-weight: 700;
    padding: 0.75rem;
    margin: 0;
  }
  .card-header-icon {
    align-items: center;
    cursor: pointer;
    display: flex;
    padding: 0.75rem;
    justify-content: center;
  }
  .card-content {
    padding: 1.5rem;
    background-color: transparent;
  }
</style>

Class props

📄 Full scss file

Collapse Title

Collapse Content

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
contentClass	Class of the content.
rootClass	Class of the root element.
triggerClass	Class of the trigger element.

Props

Prop name	Description	Type	Values	Default
animation	Custom animation (transition name)	string	-	From config collapse: {   animation: 'fade' }
ariaId		string	-	''
open	Whether collapse is open or not, use the .sync modifier (Vue 2.x) or v-model:open (Vue 3.x) to make it two-way binding	boolean	-	true
override	Override classes	boolean	-	false
position	Trigger position	string	top, bottom	'top'

Events

Event name	Properties	Description
update:open

Slots

Name	Description	Bindings
trigger
default

Style

CSS Variable	SASS Variable	Default