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.
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:
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.
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;
Item
Single item in accordion component represents the lowest number of sections it can hold, allowing for flexibility even with a single item.
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;
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.
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;
Multi-Open Accordion Group: A group in which more than one accordion can be on at the same time.
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;
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.
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.
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.
Aria-Hidden Elements
Ensures aria-hidden elements are not focusable nor contain focusable elements
Inline Text Spacing
Ensure that text spacing set through style attributes can be adjusted with custom stylesheets
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
Design System
API
Accordion Group API Table
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
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
Last updated
Was this helpful?