Aqua Basis

The AqCollapseGroup component wraps multiple collapsible items (AqCollapse) into a group container, optionally functioning as an accordion (only one item open at a time).

<aq-collapse-group>
  <aq-collapse>
    ...
  </aq-collapse>

  <aq-collapse">
    ...
  </aq-collapse>

  <aq-collapse>
    ...
  </aq-collapse>
</aq-collapse-group>

Props and Attributes

Prop / Attr	Type	Default	Description
`isAccordion`	`boolean`	`false`	Allows only one collapse to be open at a time. Enables accordion behavior.
`showBorder`	`boolean`	`true`	Toggles the outer border of the group.
`showDividerGroup`	`boolean`	`true`	Shows inner dividers between header and content for all items.

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-aqcollapsegroup--default&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

💡 Events are emitted by the inner AqCollapse components, not by the group.

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 AqCollapseGroup component accepts multiple <aq-collapse> items in its default slot.

<aq-collapse-group>
  <aq-collapse>...</aq-collapse>
  <aq-collapse>...</aq-collapse>
  <aq-collapse>...</aq-collapse>
</aq-collapse-group>

In Frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<div>
  <aq-button is-outline onclick="collapseGroup1.hideAll()">Hide all</aq-button>

  <aq-collapse-group is-accordion id="id-collapse-group-1">
    <aq-collapse @close="handleClose" @open="handleOpen">
      ...
    </aq-collapse>

    <aq-collapse @close="handleClose" @open="handleOpen">
      ...
    </aq-collapse>

    <aq-collapse @close="handleClose" @open="handleOpen">
      ...
    </aq-collapse>
  </aq-collapse-group>
</div>

<script>
  const collapseGroup1 = document.getElementById('id-collapse-group-1');
</script>

Vue

<template>
  <div>
    <aq-button is-outline @click="hideAll">Hide all</aq-button>

    <!-- Collapse Group -->
    <aq-collapse-group is-accordion ref="collapseGroup1">
      <aq-collapse @close="handleClose" @open="handleOpen">
        ...
      </aq-collapse>

      <aq-collapse @close="handleClose" @open="handleOpen">
        ...
      </aq-collapse>

      <aq-collapse @close="handleClose" @open="handleOpen">
        ...
      </aq-collapse>
    </aq-collapse-group>
  </div>
</template>

<script lang="ts">
import {
  AqCollapseGroup,
  AqCollapse,
  AqCollapseHeader,
  AqCollapseContent,
  AqButton,
  AqSubheading,
} from '@aqua-ds/vue';
import { ref, defineComponent } from 'vue';

export default defineComponent({
  name: 'CollapseGroupSet',
  setup() {
    const collapseGroup1 = ref<any>(null);

    const hideAll = () => {
      if (collapseGroup1.value) {
        collapseGroup1.value.hideAll();
      }
    };

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

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

    return {
      collapseGroup1,
      hideAll,
      handleOpen,
      handleClose
    };
  }
});
</script>

React

import { useRef } from 'react';
import {
  AqCollapseGroup,
  AqCollapse,
  AqCollapseHeader,
  AqCollapseContent,
  AqSubheading,
  AqButton
} from '@aqua-ds/react';

export const CollapseGroupSet = () => {
  const collapseGroupRef = useRef<any>(null);

  const hideAll = () => {
    collapseGroupRef.current?.hideAll();
  };

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

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

  const handleHeaderClick = (e: any) => {
    console.log('Collapse header click:', e);
  };

  return (
    <div className="container">
      <div>
        <AqButton isOutline onClick={hideAll}>Hide all</AqButton>
      </div>

      <AqCollapseGroup isAccordion ref={collapseGroupRef}>
        <AqCollapse onOpen={handleOpen} onClose={handleClose}>
          ...
        </AqCollapse>

        <AqCollapse onOpen={handleOpen} onClose={handleClose}>
          ...
        </AqCollapse>

        <AqCollapse onOpen={handleOpen} onClose={handleClose}>
          ...
        </AqCollapse>
      </AqCollapseGroup>
    </div>
  );
};

Angular

// collapse-group.component.ts
import { Component, ViewChild } from '@angular/core';
import {
  AqCollapseGroup,
  AqCollapse,
  AqCollapseHeader,
  AqCollapseContent,
  AqButton,
  AqSubheading,
  AqHelperText
} from '@aqua-ds/angular';

@Component({
  selector: 'app-set-collapse-group',
  standalone: true,
  imports: [
    AqCollapseGroup,
    AqCollapse,
    AqCollapseHeader,
    AqCollapseContent,
    AqButton,
    AqSubheading,
    AqHelperText
  ],
  templateUrl: './set-collapse-group.component.html'
})
export class SetCollapseGroupComponent {
  @ViewChild('collapseGroup', { static: true }) collapseGroupRef!: AqCollapseGroup;

  hideAll(): void {
    this.collapseGroupRef?.hideAll();
  }

  handleOpen(): void {
    console.log('Collapse opened');
  }

  handleClose(): void {
    console.log('Collapse closed');
  }

  handleHeaderClick(event: Event): void {
    console.log('Collapse header click:', event);
  }
}

<!-- collapse-group.component.html -->

<div class="container">
  <aq-button isOutline (click)="hideAll()">Hide all</aq-button>

  <aq-collapse-group isAccordion #collapseGroup>
    <aq-collapse (open)="handleOpen()" (close)="handleClose()">
      ...
    </aq-collapse>

    <aq-collapse (open)="handleOpen()" (close)="handleClose()">
      ...
    </aq-collapse>

    <aq-collapse (open)="handleOpen()" (close)="handleClose()">
      ...
    </aq-collapse>
  </aq-collapse-group>
</div>