/o//commerce-media/accounts/-1/images/30014691?download=true

Accordion Set Fragment
Low-Code
Content Management & Operations Utility
30014660

he Accordion Set fragment brings flexible, modern accordion functionality to Liferay pages without relying on external libraries. Built with native HTML <details> elements, it’s fast, accessible, and easy to configure.

Key Features:

  • Pure HTML + CSS + JS — No external libraries required.

  • Configurable IDs — Each accordion gets a unique ID (accordion{i}) based on your chosen Start Index.

  • Adjustable Amount — Create as many accordions as you need using the Accordion Amount setting.

  • Optional State Persistence — Enable Get Local Storage to save open/closed states so they remain the same after a page refresh.

  • Responsive & Accessible — Works with native browser behavior while enhancing styling.

Configuration Options:

  • Start Index — Sets the starting value of i for accordion IDs.

  • Accordion Amount — Number of accordions to generate in this set.

  • Get Local Storage — When enabled, the state of each accordion is stored in local storage and restored on reload.

Usage Notes:

  • IDs follow the pattern accordion{i}, incrementing by 1 for each accordion in the set.

  • Default behavior is for accordions to start open unless local storage state says otherwise.

DEVELOPER
DEVELOPER
15/08/25 12:51
Published date
15/08/25 12:51
Published Date
15/08/25 12:51
SUPPORTED OFFERINGS
Liferay PaaS
Supported Versions
2025 Q2
Resource Requirements
Edition
PRICE
Free
help & support
SHARE LINK
Copy & Share

HTML Example

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. Paragraphs are usually an expected part of formal writing, used to organize longer prose.