README

Adds an accessible Accordion and Accordion Item content type to Magento Page Builder.

Compatibility

Magento 2

Magento 2.4.4–2.4.6 and PHP 8.1 are not supported.

Magento	PHP
2.4.7	8.2, 8.3
2.4.8	8.3, 8.4
2.4.9	8.5

Each code package declares only its direct dependencies with bounded component API families. The consuming Magento metapackage selects the exact secure patch release. Review Adobe's system requirements, lifecycle policy, release schedule, security enforcement policy, and versioning policy when maintaining the matrix.

Mage-OS

Mage-OS	PHP	Magento base
3.4.0	8.3, 8.4, 8.5	2.4.9

Mage-OS 3.4 components replace the corresponding Magento 2.4.9 component packages. The existing Magento-named component constraints therefore support both distributions without parallel dependency alternatives. Mage-OS supports only its latest release branch; review its release policy and system requirements when this matrix is updated.

The Magento Blank and Luma themes are supported by this package. Hyva storefronts require fom/module-page-builder-accordion-hyva.

Installation

composer require fom/module-page-builder-accordion
bin/magento module:enable Fom_PageBuilderAccordion
bin/magento setup:upgrade

Deploy static content and clear caches using the normal process for the installation.

Content settings

Expand Behavior: one item, one item always open, or multiple items.
Initially Open Item: none or a current item selected by title.
Open and Close Animation: none, 200 ms, 300 ms, or 500 ms.
Indicator Position: left or right.
Item Heading Level: H2 through H6.

The default storefront indicator uses Magento's @icon-down and @icon-up icon-font glyphs. Animation is disabled when the visitor requests reduced motion.

Blank and Luma customization

The default appearance uses Magento's .lib-data-accordion() mixin. Every module variable in view/frontend/web/css/source/content-type/accordion/_variables.less defaults to the corresponding Blank or Luma accordion variable.

Override only this component from a custom theme in:

app/design/frontend/Vendor/theme/Fom_PageBuilderAccordion/web/css/source/_extend.less

Examples:

@fom-page-builder-accordion-icon__collapsed: @icon-next;
@fom-page-builder-accordion-icon__expanded: @icon-down;
@fom-page-builder-accordion-control__font-weight: @font-weight__bold;
@fom-page-builder-accordion-content__padding: @indent__base;

Stable styling hooks are:

[data-content-type='accordion'][data-appearance='default']
[data-content-type='accordion-item'] > .item.title > .switch
[data-content-type='accordion-item'] > .item.content

Page Builder's Advanced section also supplies a CSS Classes field for per-instance styling.

Adding an appearance

The module ships only the native default appearance. An extension module can merge another option into AppearanceSourceAccordion, add an appearance node to the accordion content type configuration, and provide matching preview, master, and style files.

Expand behavior, initial state, animation, heading level, and indicator position remain settings because they change interaction or semantics rather than the component's visual design.

Accessibility

Each item renders as a configurable heading containing a native button. The storefront maintains aria-expanded, aria-controls, and labelled panel relationships, with Enter, Space, Arrow, Home, and End keyboard support. Without JavaScript, all panel content remains readable.

License

Open Software License 3.0

fom / module-page-builder-accordion

Maintainers

Package info

Statistics

Security