Accordion element

WCAG Accordion

The <wcag-accordion> is a customizable, accessible web component designed to provide collapsible content areas, following WCAG standards for accessibility. This component ensures keyboard navigability and ARIA attributes to enhance accessibility for users.

Properties

Attributes

  • Name
    isOpen
    Type
    boolean
    Description

    Controls the open state of the accordion. When true, the accordion content is expanded; when false, it is collapsed.

Usage

To use the <wcag-accordion>, simply include it in your HTML and define the title and content using slots. The component is styled using external CSS for customization. 

    
      <wcag-accordion class="py-4">
        <span slot="title">My Accordion Title</span>
        <div>
          This is the content of the accordion. It can contain any type of content, including text, images, or other web components.
        </div>
      </wcag-accordion>

Methods

toggleAccordion()

Toggles the open state of the accordion. If the accordion is closed, this method will open it, and if it is open, this method will close it.

Styling

The <wcag-accordion> uses a combination of utility classes and CSS for styling. Adjust the styles in wcag-accordion.css to match your design system.

My Accordion Title
This is the content of the accordion. It can contain any type of content, including text, images, or other web components.

Example

                                
        <wcag-accordion class="py-4">
            <span slot="title">My Accordion Title</span>
            <div>
                This is the content of the accordion. It can contain any type of content, including text, images, or other web components.
            </div>
        </wcag-accordion>