Accordion Set Fragment

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