Accordion

<wa-accordion> Experimental Since 3.0

Provides a wrapper for the details component to implement an accordion-like behavior, allowing only a single section to be open at any given time.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
<wa-accordion>
    <wa-details open>
    <div slot="summary" class="wa-flank">
        <wa-icon  name="plus"></wa-icon>
        <span>First</span>
    </div>
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>

  <wa-details>
    <div slot="summary" class=wa-split:row">
        <span>Second</span>
        <wa-badge variant="brand" attention="bounce" pill>1</wa-badge>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </wa-details>

  <wa-details class="change_icon" summary="Third">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    <wa-icon slot="expand-icon" name="angles-right"></wa-icon>    
    <wa-icon slot="collapse-icon" name="angles-right"></wa-icon>    
  </wa-details>
</wa-accordion>

Importing

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN npm Self-Hosted React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.14.0/components/accordion/accordion.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/accordion/accordion.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/accordion/accordion.js';

To import this component for React 18 or below, use the following code:

import WaAccordion from '@awesome.me/webawesome/dist/react/accordion/index.js';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

CSS custom properties

Learn more about CSS custom properties.

CSS parts

Learn more about CSS parts.

Need a hand? Report a bug Ask for help
    No results