Accordion Animated

Use the --opened state to animate accordion content.

Animated Section

This accordion demonstrates a custom opening/closing animation. The transition duration and easing can be adjusted via CSS variables or inline styles.

Code

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

<sv-accordion class="accordion">
  <span slot="summary">Animated Section</span>

  <p class="accordion-content">
    This accordion demonstrates a custom opening/closing animation. The transition duration and easing can be adjusted via CSS
    variables or inline styles.
  </p>
</sv-accordion>

1 collapsed line
<style>
  [slot="summary"] {
    color: var(--sb-color-gray-0);
  }

6 collapsed lines
  .accordion-content {
    margin-block-start: 0;
    translate: 0 50px;
    transition: translate 350ms ease;
  }

  /* Update styles when the accordion is open */
  .accordion:state(--opened) .accordion-content {
    translate: 0 0;
  }
</style>