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:

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;

<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>
  <!-- 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>

<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.

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;

<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>
  <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>

<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.

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;

<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>
  <!-- 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>

<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.

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;

<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>
  <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>

<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.

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.

Design System

API

Accordion Group API Table

Accordion API Table

PreviousOverview NextAlert

Last updated 5 months ago