spz-accordion

The spz-accordion allows you to display collapsible and expandable content sections.

• An spz-accordion accepts one or more <section> elements as its direct children.
• Each <section> must contain two direct children:
  • The first child is the header of the section.
  • The second child is the expandable or collapsible content.

You can expand or collapse the content of a <section> by click or tap on the section header.

You can use a animate attribute to animate expand and collapse the content. You can add a expanded attribute to <section> when you want the section to expand by default.

<spz-accordion layout="container" animate>
  <section>
    <h3>Header 1</h3>
    <div>Content 1</div>
  </section>
  <section expanded>
    <h3>Header 2</h3>
    <div>Content 2</div>
  </section>
</spz-accordion>

If this attribute is present, there will be a default animation effect when the content of section expands or collapses.

If a <section> has an expanded attribute, its content expands by default.

If this attribute is present, only one of the <section> elements can be expanded at a time.

To toggle the content of a section to expand or collapse.

To expand the content of a section.

To collapse the content of a section.

<spz-accordion id="accordion" layout="container" animate>
  <section id="specified-section">
    <h3>Header 1</h3>
    <div>Content 1</div>
  </section>
  <section>
    <h3>Header 2</h3>
    <div>Content 2</div>
  </section>
</spz-accordion>

<button type="button" @tap="accordion.toggle(section='specified-section')">Toggle</button>
<button type="button" @tap="accordion.expand(section='specified-section')">Expand</button>
<button type="button" @tap="accordion.collapse(section='specified-section')">Collapse</button>

Be automatically triggered when the element has any <section> that is expanded.

Be automatically triggered when the element has any <section> that is collapsed.

<div id="text">Expanded OR Collapsed</div>

<spz-accordion
  layout="container"
  @expand="text.toggleClass(class='expand', force=true);"
  @collapse="text.toggleClass(class='collapse', force=true);"
>
  <section>
    <h3>Header 1</h3>
    <div>Content 1</div>
  </section>
</spz-accordion>