Accordion is designed for compact collections where visitors open individual items as needed. With Joomla Articles it uses the richer Article Teaser Accordion presentation; Manual Items use the standard Accordion presentation.
Set:
3. Layout → Display Layout → Accordion
Joomla Articles: Article Accordion
With Joomla Articles, each collapsed item is an editorial teaser rather than a plain question-style row. The teaser can show an Article image, title, metadata and a short Intro preview while the full configured content remains in the expandable panel.
Teaser Image Position
Choose:
- No image
- Top
- Left
- Right
Left and Right remain lateral positions on narrow screens; the thumbnail width contracts responsively so the configured position is preserved. Choose Top explicitly when a stacked image is preferred.
Teaser Image Size
When an image position is enabled, choose:
- Small
- Medium
- Large
The size is responsive rather than a fixed pixel dimension.
Show Teaser Metadata
When enabled, the collapsed Article teaser can show available:
- Category
- Published date
- Author
- Tags
This is separate from metadata controls used by other layouts.
Show Intro Preview
When enabled, ES Content Display creates a plain-text preview from the Joomla Article Intro.
Intro Preview Length controls the approximate maximum length from 60 to 400 characters. The module avoids ending in the middle of a word where practical.
Hide Preview When Expanded is enabled by default so the short teaser text does not repeat immediately above the full Intro content.
Expanded content
The 3. Layout → Content Display tab still controls the content shown after the Article teaser is opened:
- Show Intro
- Show Body
- Show Read More
The Article teaser image and teaser metadata are configured in 3. Layout, because they belong to the collapsed teaser presentation.
Manual Items: Standard Accordion
With Manual Items, Accordion keeps the simpler title-trigger presentation and places optional Image, Intro, Body and Read More fields inside the expanded panel.
Accordion Open Behavior
Single open item
Opening one item closes the previously open item.
Allow multiple open items
Visitors may keep several panels open simultaneously.
Initially Open
Choose:
- None
- First item
If Deep Links are enabled and the page URL contains a valid ES Content Display item hash, that deep link takes precedence over the initial-open setting.
Keyboard behavior
Accordion triggers are native buttons.
Visitors can use:
- Enter / Space — open or close the focused item
- Down Arrow — move focus to the next trigger
- Up Arrow — move focus to the previous trigger
- Home — move focus to the first trigger
- End — move focus to the last trigger
Titles
The item title cannot be hidden in Accordion. It is the visible label of the accessible control.
Deep Links
When enabled, opening an item updates the page hash. A URL containing that hash can reopen the same item when the page is visited directly.
See Deep Links for details.
