/o//commerce-media/accounts/-1/images/30014691?download=true
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.
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.