Aqua DS - Component Library

Framework Implementation

Style Customization

Aqua Basis

Aqua Composition

The AqCollapse component wraps collapsible content, including header and body.

<aq-collapse
  id-collapse="collapse-1"
  show-border
  show-divider
>
  <aq-collapse-header id="id-collapse-header-1">
    <span slot="title">
      <aq-subheading>View campaign</aq-subheading>
    </span>
    <span slot="subtitle">
      <aq-helper-text>Optional subtitle</aq-helper-text>
    </span>
    <span slot="options">
      <aq-button is-outline>
        <em class="aq-icon-settings"></em>
      </aq-button>
    </span>
  </aq-collapse-header>
  <aq-collapse-content>
    Lorem ipsum dolor sit amet consectetur adipisicing elit...
  </aq-collapse-content>
</aq-collapse>

Props and Attributes

Prop / Attr	Type	Default	Description
`idCollapse`	`string`	`'collapse-1'`	Unique ID of the collapse, used for global events.
`showBorder`	`boolean`	`true`	Shows the border around the collapse.
`showDivider`	`boolean`	`true`	Shows the inner divider between the collapse header and the content.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-data-aqcollapse--aq-collapse&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Web Components
`open`	Emitted when collapse opens (click or programmatic).	`onOpen={handleOpen}`	`(open)="handleOpen($event)"`	`@open="handleOpen"`	`addEventListener('open', handleOpen)`
`close`	Emitted when collapse closes (click or programmatic).	`onClose={handleClose}`	`(close)="handleClose($event)"`	`@close="handleClose"`	`addEventListener('close', handleClose)`

Event Types

Event	React/Angular/Vue
`open`	`(e?:Event)`
`close`	`(e?:Event)`

Subcomponents and Slots

The AqCollapse component includes a default slot to inject AqCollapseHeader and AqCollapseContent.

<!--
	<aq-collapse ...> <slot /> </aq-collapse>
-->

<aq-collapse
  id-collapse="collapse-1"
  show-border
  show-divider
>
  <aq-collapse-header>
    ...
  </aq-collapse-header>
  <aq-collapse-content>
    ...
  </aq-collapse-content>
</aq-collapse>

AqCollapseHeader

The aq-collapse-header component is used inside an aq-collapse element to render the visible header section.

This header is commonly used to toggle visibility of the collapsible content (aq-collapse-content). The component also supports custom layouts using named slots for titles, subtitles, and additional action buttons.

Props and Attributes

Prop / Attr	Type	Default	Description
`disableToggle`	`boolean`	`false`	If the header is open, prevents closing when the header is clicked.

Events

Event Name	Description	React	Angular	Vue	Web Components
`close`	Triggered when the collapse is closed after clicking the header.	`onClose={handler}`	`(close)="onClose()"`	`@close="onClose"`	`addEventListener('close', handler)`

Event Types

| --- | --- |

Slots

The AqCollapseHeader component provides three named slots for layout flexibility:

title Slot
subtitle Slot
options Slot

⚠️ Slots are optional, but the layout assumes at least a title for meaningful UX.

AqCollapseContent

The AqCollapseContent component is used inside an AqCollapse to render the collapsible panel shown when the collapse is expanded.

Props and Attributes

None.

Events

None.

Slots

The AqCollapseContent component exposes a single default slot:

Default Slot

💡 AqCollapseContent is always paired with AqCollapseHeader to create interactive sections that toggle visibility.

In Frameworks

Web Components

<div class="section">
  <div class="section-title">Collapse</div>
  
  <div>
    <aq-button is-outline onclick="collapse.show()">Show</aq-button>
    <aq-button is-outline onclick="collapse.hide()">Hide</aq-button>
    <aq-button is-outline onclick="collapse.toggle()">Toggle</aq-button>
  </div>

  <aq-collapse
    id="id-collapse-1"
    @close="handleClose"
    @open="handleOpen"
  >
    <aq-collapse-header id="id-collapse-header-1">
      <span slot="title">
        <em class="aq-icon-check-circle"></em>
        <aq-subheading>Campaign</aq-subheading>
      </span>
    </aq-collapse-header>
    <aq-collapse-content>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae,
      accusantium earum quidem ex, veritatis assumenda debitis accusamus
      inventore quae, voluptate sunt quas laborum. Voluptate earum velit
      autem sunt a labore?
    </aq-collapse-content>
  </aq-collapse>
</div>

<script>
  const collapse = document.getElementById('id-collapse-1');
  const collapseHeader = document.getElementById('id-collapse-header-1');

  collapseHeader.addEventListener('click', (e) => {
    console.log('collapse header click: ', e);
  });
</script>

Vue

<template>
  <div class="section">
    <div class="section-title">Collapse</div>
    <div class="components">

    <div>
      <aq-button is-outline @click="showCollapse">Show</aq-button>
      <aq-button is-outline @click="hideCollapse">Hide</aq-button>
      <aq-button is-outline @click="toggleCollapse">Toggle</aq-button>
    </div>

    <aq-collapse
      ref="collapseRef"
      @open="handleOpen"
      @close="handleClose"
    >
      <aq-collapse-header @click="handleHeaderClick">
        <span slot="title">
          <em class="aq-icon-check-circle"></em>
          <aq-subheading>Campaign</aq-subheading>
        </span>
      </aq-collapse-header>

      <aq-collapse-content>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae,
        accusantium earum quidem ex, veritatis assumenda debitis accusamus
        inventore quae, voluptate sunt quas laborum. Voluptate earum velit
        autem sunt a labore?
      </aq-collapse-content>
    </aq-collapse>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const collapseRef = ref(null)

const showCollapse = () => {
  collapseRef.value?.show()
}

const hideCollapse = () => {
  collapseRef.value?.hide()
}

const toggleCollapse = () => {
  collapseRef.value?.toggle()
}

const handleOpen = () => {
  console.log('Collapse opened')
}

const handleClose = () => {
  console.log('Collapse closed')
}

const handleHeaderClick = (e) => {
  console.log('Collapse header click:', e)
}
</script>