Accordion Nested

Nest accordions to create disclosure levels; share group values among siblings.

Parent Section

This is the content of the parent accordion. You can expand it to reveal more details, including nested sections.

Nested Section 1

Content of the first nested accordion. You can include additional details or instructions here.

Nested Section 2

Content of the second nested accordion. Nested accordions behave just like normal ones but stay inside the parent section.

Code

The following example assumes that you have imported the component and set up the theme.

<sv-accordion heading-level="3">
  <span slot="summary">Parent Section</span>
3 collapsed lines
  <p class="accordion-content">
    This is the content of the parent accordion. You can expand it to reveal more details, including nested sections.
  </p>

  <sv-accordion group="nested" heading-level="4">
    <span slot="summary">Nested Section 1</span>
3 collapsed lines
    <p class="accordion-content">
      Content of the first nested accordion. You can include additional details or instructions here.
    </p>
  </sv-accordion>

  <sv-accordion group="nested" heading-level="4">
    <span slot="summary">Nested Section 2</span>
3 collapsed lines
    <p class="accordion-content">
      Content of the second nested accordion. Nested accordions behave just like normal ones but stay inside the parent section.
    </p>
  </sv-accordion>
</sv-accordion>

<style>
  sv-accordion[group="nested"] {
    --sv-gray-6: var(--sv-gray-5);

    &:last-child {
      margin-block: 1em;
    }
  }

4 collapsed lines
  .accordion-content {
    margin-block-start: 0;
  }
</style>