Accordion

<wa-accordion> Since 3.0 experimental

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>

Slots

Learn more about using slots.

CSS custom properties

Learn more about CSS custom properties.

CSS parts

Learn more about CSS parts.

Importing

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code. 

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

To manually import this component from React, use the following code. 

import WaAccordion from '@awesome.me/webawesome/dist/react/accordion';
Need a hand? Report a bug Ask for help
    No results