Skip to main content

Main Content

Accordion

This component has experimental features.

Description

Expand and collapse sections.

Experimental: Features and functionality are new and could change

Default Style

I'm the Accordion Title

  • Aliquam erat volutpat. Nulla facilisi. Nunc porttitor, elit non eleifend aliquam , est leo scelerisque nibh, nec faucibus odio urna ac nulla.

    Maecenas laoreet in metus eget convallis. Vivamus at eleifend felis. Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur.

  • Aliquam erat volutpat. Nulla facilisi. Nunc porttitor, elit non eleifend aliquam, est leo scelerisque nibh, nec faucibus odio urna ac nulla.

    Maecenas laoreet in metus eget convallis. Vivamus at eleifend felis . Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur.

  • Aliquam erat volutpat. Nulla facilisi . Nunc porttitor, elit non eleifend aliquam, est leo scelerisque nibh, nec faucibus odio urna ac nulla.

    Maecenas laoreet in metus eget convallis. Vivamus at eleifend felis . Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur.

CTA Button Text

Example Markup

<div class="su-accordion no-js [ modifier_class ]"> <h2>I'm the Accordion Title</h2> <button class="su-accordion__collapse-all su-button--secondary">Collapse all -</button> <button class="su-accordion__expand-all su-button--secondary">Expand all +</button> <ul class="su-accordion__list"> <li class="su-accordion__item"> <h2 class="su-accordion__title"> <button class="su-accordion__button">Section Heading</button> </h2> <div class="su-accordion__content"> <p> Aliquam erat volutpat. Nulla facilisi. <strong>Nunc porttitor, elit non eleifend aliquam</strong> , est leo scelerisque nibh, nec faucibus odio urna ac nulla. </p> <p>Maecenas laoreet in metus eget convallis. Vivamus at eleifend felis. Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur.</p> </div> </li> <li class="su-accordion__item"> <h2 class="su-accordion__title"> <button class="su-accordion__button">What am I? I'm an example FAQ title.</button> </h2> <div class="su-accordion__content"> <p>Aliquam erat volutpat. Nulla facilisi. Nunc porttitor, elit non eleifend aliquam, est leo scelerisque nibh, nec faucibus odio urna ac nulla.</p> <p> Maecenas laoreet in metus eget convallis. <em>Vivamus at eleifend felis</em> . Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur. </p> </div> </li> <li class="su-accordion__item"> <h2 class="su-accordion__title"> <button class="su-accordion__button">Who am I? What planet am I on?</button> </h2> <div class="su-accordion__content"> <p> Aliquam erat volutpat. <a href="https://stanford.edu">Nulla facilisi</a> . Nunc porttitor, elit non eleifend aliquam, est leo scelerisque nibh, nec faucibus odio urna ac nulla. </p> <p> Maecenas laoreet in metus eget convallis. <em>Vivamus at eleifend felis</em> . Proin non vehicula neque. Etiam eleifend sapien ut nulla malesuada, ac condimentum nisl efficitur. </p> </div> </li> </ul> <a href="https://stanford.edu" class="su-accordion__cta su-button " target="_blank">CTA Button Text</a> </div>