Collapse #

<template>
  <section>
    <o-collapse :open="false" aria-id="contentIdForA11y1">
      <template #trigger>
        <o-button
          variant="primary"
          aria-controls="contentIdForA11y1"
        >
          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>

<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">
          <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 lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const isOpen = ref(0)
    const collapses = ref(
      [
        {
          title: 'Title 1',
          text: 'Text 1',
        },
        {
          title: 'Title 2',
          text: 'Text 2',
        },
        {
          title: 'Title 3',
          text: 'Text 3',
        }
      ]
    )
    return {
      isOpen, collapses
    }
  }
})
</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>