spz-accordion#

#When to use

• To group and hide complex areas, keeping the page tidy.
• An accordion is a special type of collapsible panel that allows single/multiple content areas to be expanded simultaneously.

#Code demonstration

#Basic Usage

The most basic usage, where the first content block is expanded by default. The following conventions should be observed:

• Child elements must be enclosed in <section> tags to be effective.
• Within the section element, there must be two child elements:
  • The first child represents the clickable area to expand.
  • The second child represents the content area.

When the content area is expanded, the section element will automatically have an expanded attribute added.

<spz-accordion layout="container" expand-single-section>
  <section expanded>
    <h3>Header 1</h3>
    <div>Section content 1</div>
  </section>
  <section>
    <h3>Header 2</h3>
    <div>Section content 2</div>
  </section>
  <section>
    <h3>Header 3</h3>
    <div>Section content 3</div>
  </section>
</spz-accordion>

#Using methods to control expand/collapse

Methods can be used to expand/collapse panels. When a panel is expanded or collapsed, events are used to display the visibility of the current operation.

<div class="api-status">
  Toggle status:
  <span hidden id="operation-expand">Expand</span>
  <span id="operation-collapse">Collapse</span>
</div>

<spz-accordion id="accordion-api" layout="container" expand-single-section @expand="operation-collapse.hide;operation-expand.show;" @collapse="operation-collapse.show;operation-expand.hide;">
  <section expanded>
    <h3>Header 1</h3>
    <div>Section content 1</div>
  </section>
  <section id="accordion-section2">
    <h3>Header 2</h3>
    <div>Section content 2</div>
  </section>
  <section>
    <h3>Header 3</h3>
    <div>Section content 3</div>
  </section>
</spz-accordion>

<div class="api-buttons">
  <button @tap="accordion-api.toggle(section='accordion-section2')">Toggle "Header 2"</button>
  <button @tap="accordion-api.expand(section='accordion-section2')">Expand "Header 2"</button>
  <button @tap="accordion-api.collapse(section='accordion-section2')">Collapse "Header 2"</button>
  <button @tap="accordion-api.disabled(section='accordion-section2')">Disabled "Header 2"</button>
  <button @tap="accordion-api.enable(section='accordion-section2')">Enable "Header 2"</button>
</div>

#Attributes

#Methods

#toggle

• When the section content area is expanded, calling the toggle method collapses the content area;
• When the section content area is collapsed, calling the toggle method expands the content area;

#expand

When the section content area is collapsed, calling the expand method expands the content area.

#collapse

When the section content area is expanded, calling the collapse method collapses the content area.

#enable

When the clickable area of a section is disabled, calling the enable method restores the clickable area to expand/collapse.

#disabled

Calling the disabled method disables the clickable area, making it unresponsive to clicks, which will not expand/collapse the content.

#Events

expand

This event is automatically triggered when a section element is expanded, no parameters are required.

collapse

This event is automatically triggered when a section element is collapsed, no parameters are required.

#AI Summary (LLM Ready)

• Component ID: spz-accordion
• One-line purpose: A content area that can be collapsed or expanded.
• Detected attribute rows: 3
• Detected method subsections: 5
• Detected event subsections: 2
• Top attribute names: expand-single-section, animate, expanded
• Top method names: toggle, expand, collapse, enable, disabled
• Top event names: expand, collapse
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/