Section Container

Single Open Mode (Default)

In single mode, only one section can be open at a time. Opening a new section automatically closes others, creating an accordion-style behavior.

<q2-section-container open-mode="single">
  <q2-section label="Personal Information">
    Name, email, phone number, and address details go here.
  </q2-section>
  <q2-section label="Security Settings">
    Password, two-factor authentication, and security questions.
  </q2-section>
  <q2-section label="Notification Preferences">
    Email, SMS, and push notification settings.
  </q2-section>
</q2-section-container>

Multiple Open Mode

In multiple mode, users can open as many sections as they want simultaneously, allowing them to view and compare content across sections.

<q2-section-container open-mode="multiple">
  <q2-section label="Checking Account">
    Balance: $1,234.56 - Last transaction: Today
  </q2-section>
  <q2-section label="Savings Account">
    Balance: $5,678.90 - Last transaction: Yesterday
  </q2-section>
  <q2-section label="Credit Card">
    Balance: $432.10 - Payment due: March 15
  </q2-section>
</q2-section-container>

Starting Closed

By default, the container starts with the first section open. Use start-open="false" to start with all sections closed.

<q2-section-container start-open="false">
  <q2-section label="Advanced Settings">
    These settings are for advanced users only.
  </q2-section>
  <q2-section label="Developer Options">
    API keys and webhook configurations.
  </q2-section>
</q2-section-container>

Choosing Which Section Opens First

Use open-pane-index to specify which section should be open initially (zero-based index).

<q2-section-container open-pane-index="2">
  <q2-section label="Step 1">
    Introduction and overview.
  </q2-section>
  <q2-section label="Step 2">
    Configuration options.
  </q2-section>
  <q2-section label="Step 3">
    Final review and submission. (This opens first)
  </q2-section>
</q2-section-container>

Start All Open

When using open-mode="multiple", you can start with all sections open using start-all-open.

<q2-section-container open-mode="multiple" start-all-open="true">
  <q2-section label="Overview">
    High-level summary of all features.
  </q2-section>
  <q2-section label="Details">
    Detailed breakdown of specifications.
  </q2-section>
  <q2-section label="Documentation">
    Links to additional resources.
  </q2-section>
</q2-section-container>

Without Labels

If sections don't have labels, they will automatically be labeled "Section 1", "Section 2", etc.

<q2-section-container>
  <q2-section>
    Content for the first section without an explicit label.
  </q2-section>
  <q2-section>
    Content for the second section without an explicit label.
  </q2-section>
</q2-section-container>

Notes

Overview

A Section Container manages multiple collapsible sections with configurable open/close behavior. It provides a structured way to organize related content into expandable sections with control over how many sections can be open simultaneously.

Anatomy

<q2-section-container>
  <q2-section label="Account Details">
    View and manage your account information including balance, account number, and routing details.
  </q2-section>
  <q2-section label="Transaction History">
    Review recent transactions and download statements for your records.
  </q2-section>
  <q2-section label="Settings">
    Configure notifications, security preferences, and account settings.
  </q2-section>
</q2-section-container>

The Section Container wraps multiple q2-section elements and controls their behavior as a group.

Usage

When To Use

• Organizing related content into logical groups
  • Use when you have multiple sections of content that users may want to view independently.
• Reducing visual complexity
  • When presenting a lot of information, collapsible sections help users focus on one topic at a time.
• Accordion-style interfaces
  • When only one section should be open at a time to guide users through sequential information.
• FAQ or help documentation
  • Organizing questions or topics into expandable sections improves scannability.

When To Not Use

• Content that should always be visible
  • Don't hide critical information that users need to see immediately.
• Single section of content
  • Use a standalone q2-section instead of a container for single sections.
• Navigation menus
  • Use dedicated navigation components instead of collapsible sections.

Usability Guidance

• Use clear, descriptive section labels
  • Labels should communicate what content the section contains.
• Consider default open state carefully
  • Open the most important or frequently accessed section by default.
• Limit the number of sections
  • Too many sections can overwhelm users. Consider grouping or alternative layouts if you have more than 7-8 sections.
• Choose the right open mode
  • Use single mode (default) for sequential content where only one section should be open at a time.
  • Use multiple mode when users may need to compare content across sections.