Accordion

The Accordion component collapses or expands content sections, organizing information on a page.

Plus UI's Accordion Component is a compact and efficient way to display content in a collapsible format. Perfect for FAQs, product descriptions, or any content-rich websites, this component allows users to expand and collapse sections with ease, making information discovery not just intuitive but also engaging.

• Accordion Actions: A container that groups a set of buttons, optional for use.

• Accordion Details: Encloses the Accordion's content, serving as the main body.

• Accordion Summary: Acts as the Accordion's header. Clicking on it will expand or collapse the content.

Anatomy

The anatomy of the Accordion Component consists of key elements designed for simplicity and ease of use. It features a title bar that users can click to expand or collapse the accordion's content section. Inside, the content area is spacious, allowing for text, images, or even other components to be displayed. Visual indicators, such as arrows, provide clear feedback on the state of each section, making the interface intuitive and user-friendly.

anatomy of accordion component

Properties

The different sizes and capacity limits can be defined through its properties to ensure it caters to various design needs and content volumes. Here's how these properties could be structured and used:

Size	Item
Small	Minimum Item
Medium	Maximum Item
Large

Size

• Small accordion component is ideal for limited spaces, perfect for mobile or sidebar use.

• Medium accordion component is a versatile choice for most needs, balancing space and content.

• Large accordion component is best for extensive content, such as detailed FAQs or guides.

React

import React from 'react';
import { PlusAccordion, PlusAccordionHeader, PlusAccordionPanel } from '@plusui/react';

// Large Size Accordion
const LargeAccordion = () => (
  <Plus-accordion size="lg">
    <Plus-accordion-header>Large Accordion</Plus-accordion-header>
    <Plus-accordion-panel>This is a large-sized accordion panel.</Plus-accordion-panel>
  </Plus-accordion>
);

export default LargeAccordion;

Angular

<plus-accordion size="sm">
  <plus-accordion-header>Small Accordion</plus-accordion-header>
  <plus-accordion-panel>This is a small-sized accordion panel.</plus-accordion-panel>
</plus-accordion>

Vue

<template>
  <!-- Small Size Accordion -->
  <plus-accordion size="sm">
    <plus-accordion-header>Small Accordion</plus-accordion-header>
    <plus-accordion-panel>This is a small-sized accordion panel.</plus-accordion-panel>
  </plus-accordion>
</template>

Javascript

<plus-accordion size="md">
  <plus-accordion-header>Medium Accordion</plus-accordion-header>
  <plus-accordion-panel>This is a medium-sized accordion panel.</plus-accordion-panel>
</plus-accordion>

Item

• Single item in accordion component represents the lowest number of sections it can hold, allowing for flexibility even with a single item.

React

import React from 'react';
import { PlusAccordion, PlusAccordionHeader, PlusAccordionPanel } from '@plusui/react';

// Simple Accordion in React
const SimpleAccordion = () => (
  <PlusAccordion>
    <PlusAccordionHeader>Simple Accordion</PlusAccordionHeader>
    <PlusAccordionPanel>This is the content of a simple accordion.</PlusAccordionPanel>
  </PlusAccordion>
);

export default SimpleAccordion;

Angular

<plus-accordion>
  <plus-accordion-header>Simple Accordion</plus-accordion-header>
  <plus-accordion-panel>This is the content of a simple accordion.</plus-accordion-panel>
</plus-accordion>

Vue

<template>
  <plus-accordion>
    <plus-accordion-header>Simple Accordion</plus-accordion-header>
    <plus-accordion-panel>This is the content of a simple accordion.</plus-accordion-panel>
  </plus-accordion>
</template>

Javascript

<plus-accordion>
  <plus-accordion-header>Simple Accordion</plus-accordion-header>
  <plus-accordion-panel>This is the content of a simple accordion.</plus-accordion-panel>
</plus-accordion>

• Multiple item in accordion component represents the upper limit of sections to ensure usability and prevent overcrowding, tailored to maintain optimal performance and user experience.

React

import React from 'react';
import { PlusAccordionGroup, PlusAccordion, PlusAccordionHeader, PlusAccordionPanel } from '@plusui/react';

// Accordion Group in React
const AccordionGroup = () => (
  <PlusAccordionGroup>
    <PlusAccordion>
      <PlusAccordionHeader>Accordion 1</PlusAccordionHeader>
      <PlusAccordionPanel>Content of the first accordion.</PlusAccordionPanel>
    </PlusAccordion>

    <PlusAccordion>
      <PlusAccordionHeader>Accordion 2</PlusAccordionHeader>
      <PlusAccordionPanel>Content of the second accordion.</PlusAccordionPanel>
    </PlusAccordion>
  </PlusAccordionGroup>
);

export default AccordionGroup;

Angular

<plus-accordion-group>
  <plus-accordion>
    <plus-accordion-header>Accordion 1</plus-accordion-header>
    <plus-accordion-panel>Content of the first accordion.</plus-accordion-panel>
  </plus-accordion>

  <plus-accordion>
    <plus-accordion-header>Accordion 2</plus-accordion-header>
    <plus-accordion-panel>Content of the second accordion.</plus-accordion-panel>
  </plus-accordion>
</plus-accordion-group>

Vue

<template>
  <!-- Accordion Group in Vue -->
  <plus-accordion-group>
    <plus-accordion>
      <plus-accordion-header>Accordion 1</plus-accordion-header>
      <plus-accordion-panel>Content of the first accordion.</plus-accordion-panel>
    </plus-accordion>

    <plus-accordion>
      <plus-accordion-header>Accordion 2</plus-accordion-header>
      <plus-accordion-panel>Content of the second accordion.</plus-accordion-panel>
    </plus-accordion>
  </plus-accordion-group>
</template>

Javascript

<plus-accordion-group>
  <plus-accordion>
    <plus-accordion-header>Accordion 1</plus-accordion-header>
    <plus-accordion-panel>Content of the first accordion.</plus-accordion-panel>
  </plus-accordion>

  <plus-accordion>
    <plus-accordion-header>Accordion 2</plus-accordion-header>
    <plus-accordion-panel>Content of the second accordion.</plus-accordion-panel>
  </plus-accordion>
</plus-accordion-group>

• Multi-Open Accordion Group: A group in which more than one accordion can be on at the same time.

React

import React from 'react';
import { PlusAccordionGroup, PlusAccordion, PlusAccordionHeader, PlusAccordionPanel } from '@plusui/react';

const MultiOpenAccordionGroup = () => (
  <PlusAccordionGroup multi>
    <PlusAccordion open>
      <PlusAccordionHeader>Accordion 1</PlusAccordionHeader>
      <PlusAccordionPanel>This is the content of the first accordion, which is open by default.</PlusAccordionPanel>
    </PlusAccordion>

    <PlusAccordion>
      <PlusAccordionHeader>Accordion 2</PlusAccordionHeader>
      <PlusAccordionPanel>This is the content of the second accordion.</PlusAccordionPanel>
    </PlusAccordion>

    <PlusAccordion open>
      <PlusAccordionHeader>Accordion 3</PlusAccordionHeader>
      <PlusAccordionPanel>This is the content of the third accordion, also open by default.</PlusAccordionPanel>
    </PlusAccordion>
  </PlusAccordionGroup>
);

export default MultiOpenAccordionGroup;

Angular

<plus-accordion-group multi>
  <plus-accordion open>
    <plus-accordion-header>Accordion 1</plus-accordion-header>
    <plus-accordion-panel>This is the content of the first accordion, which is open by default.</plus-accordion-panel>
  </plus-accordion>

  <plus-accordion>
    <plus-accordion-header>Accordion 2</plus-accordion-header>
    <plus-accordion-panel>This is the content of the second accordion.</plus-accordion-panel>
  </plus-accordion>

  <plus-accordion open>
    <plus-accordion-header>Accordion 3</plus-accordion-header>
    <plus-accordion-panel>This is the content of the third accordion, also open by default.</plus-accordion-panel>
  </plus-accordion>
</plus-accordion-group>

Vue

<template>
  <plus-accordion-group multi>
    <plus-accordion open>
      <plus-accordion-header>Accordion 1</plus-accordion-header>
      <plus-accordion-panel>This is the content of the first accordion, which is open by default.</plus-accordion-panel>
    </plus-accordion>

    <plus-accordion>
      <plus-accordion-header>Accordion 2</plus-accordion-header>
      <plus-accordion-panel>This is the content of the second accordion.</plus-accordion-panel>
    </plus-accordion>

    <plus-accordion open>
      <plus-accordion-header>Accordion 3</plus-accordion-header>
      <plus-accordion-panel>This is the content of the third accordion, also open by default.</plus-accordion-panel>
    </plus-accordion>
  </plus-accordion-group>
</template>

Javascript

<plus-accordion-group multi>
  <plus-accordion open>
    <plus-accordion-header>Accordion 1</plus-accordion-header>
    <plus-accordion-panel>This is the content of the first accordion, which is open by default.</plus-accordion-panel>
  </plus-accordion>

  <plus-accordion>
    <plus-accordion-header>Accordion 2</plus-accordion-header>
    <plus-accordion-panel>This is the content of the second accordion.</plus-accordion-panel>
  </plus-accordion>

  <plus-accordion open>
    <plus-accordion-header>Accordion 3</plus-accordion-header>
    <plus-accordion-panel>This is the content of the third accordion, also open by default.</plus-accordion-panel>
  </plus-accordion>
</plus-accordion-group>

Layout & Spacing

Carefully crafted layout and spacing are at the heart of the Plus UI Accordion Component, ensuring that each section is distinctly separated and easily accessible. The component's design promotes a clean and organized look, with adequate padding around content areas to enhance readability and focus.

layout and spacing of accordion component

Light & Dark Mode

The Plus UI Accordion Component seamlessly integrates into any theme, automatically adjusting its color scheme to match the user's preference or system settings. This feature ensures that the accordion remains visually comfortable and consistent with the overall design language of the website or application it's part of.

light and dark mode of accordion component

Accessibility

Accessibility is a priority for the Plus UI Accordion Component, making it fully navigable via keyboard and compatible with screen readers. It follows ARIA guidelines to ensure that all users, regardless of their abilities, can interact with the content effectively.

Criteria	Description	Status
Aria-Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	✔️ Passed
Inline Text Spacing	Ensure that text spacing set through style attributes can be adjusted with custom stylesheets	✔️ Passed
ID Attributes	Ensures every id attribute value is unique
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

• Accordion Group API Table

Property	Description	Type	Accepted Values	Default
multi	Allows multiple open accordions at once	Boolean	true, false	false
size	Sets the size of the group	String	sm, md, lg	md

• Accordion API Table

Property	Description	Type	Accepted Values	Default
open	Determines if the accordion is open by default	Boolean	true, false	false
size	Sets the size of the accordion	String	sm, md, lg	md