ES Content Display

Install ES Content Display

1. Sign in to the Joomla administrator area.
2. Open System → Install → Extensions.
3. Upload the ES Content Display ZIP package.
4. After Joomla confirms the installation, open Content → Site Modules.
5. Create a new ES Content Display module.

Do not unzip the installation package before uploading it to Joomla.

Fastest first module: Manual Accordion

Use Manual Items when the content belongs to the display itself rather than to Joomla Articles. This is especially useful for FAQs, tabbed information, short directories and structured information blocks.

Add Manual Items

Set:

1. Source → Content Source → Manual Items

Then open 2. Content and use the repeatable Manual Items field.

Accordion is designed for compact collections where visitors open individual items as needed.

Set:

3. Layout → Display Layout → Accordion

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

Horizontal Tabs present item titles in a horizontal tab list with one active content panel.

Set:

3. Layout → Display Layout → Horizontal Tabs

Keyboard behavior

Horizontal Tabs use manual activation:

• Left / Right Arrow — move focus between tabs
• Home — first tab
• End — last tab
• Enter / Space — activate the focused tab

Only the selected tab is in the normal Tab sequence.

In right-to-left interfaces, Left/Right navigation follows the visual direction of the tab list.

Vertical Tabs use the same content model as Horizontal Tabs, but place the tab list vertically beside the content panel.

Set:

3. Layout → Display Layout → Vertical Tabs

Keyboard behavior

Vertical Tabs use manual activation:

• Down Arrow — move focus to the next tab
• Up Arrow — move focus to the previous tab
• Home — first tab
• End — last tab
• Enter / Space — activate the focused tab

Mobile behavior

The same Tabs on Mobile options are available:

• Convert to Accordion — default
• Keep Tabs

When converted, the selected item remains selected and deep links continue to use the same stable item identity.

RTL support

Vertical Tabs use direction-aware CSS so the visual arrangement can mirror correctly in right-to-left templates.

The Compact List / Directory layout is intended for larger collections that should remain readable and easy to scan.

Set:

3. Layout → Display Layout → Compact List / Directory

Client-side Search

Enabled by default.

The Search box filters only the items already loaded by this module. It does not send a new Joomla query, perform AJAX loading or change the underlying source dataset.

Search is case-insensitive and normalizes text for practical matching.

Only content that is configured as visible is included in the searchable display data, with the item title remaining searchable even if the standalone Directory title is hidden.

Enabled by default.

Visitors can filter by initial letter:

All  A  B  C ... Z  #

Accented Latin titles are transliterated to their base A–Z letter where Joomla can normalize them. Other initials can be grouped under #.

Letters with no matching items are disabled.

Combining Search and A–Z

Search and A–Z use AND behavior.

Example:

Search: installation
A–Z: I

Only currently loaded items matching both conditions remain visible.

FAQ Mode is intended for genuine question-and-answer collections.

Set:

3. Layout → Display Layout → FAQ

FAQ Open Behavior

Choose:

Allow multiple answers open

Several answers may remain expanded at the same time.

Only one answer open

Opening a new answer closes the previous one.

Initially Open Answer

Choose:

• All answers closed
• First answer open

A matching Deep Link takes precedence over this initial setting.

Deep Links allow a URL hash to point directly to an individual ES Content Display item.

Enable them under:

Interaction → Enable Deep Links → Yes

Deep Links are enabled by default.

Supported layouts

Deep-link behavior is supported by:

• Accordion
• Horizontal Tabs
• Vertical Tabs
• Directory
• FAQ

ES Content Display is built with keyboard operation and accessible states as part of the renderer design rather than as a separate visual add-on.

Accordion and FAQ

• Native button triggers
• aria-expanded
• aria-controls
• Heading structure around controls
• Keyboard movement with Arrow Up/Down, Home and End

Tabs

• tablist, tab and tabpanel relationships
• aria-selected
• Roving tabindex
• Manual activation with Enter/Space
• Direction-appropriate arrow-key navigation

When Tabs convert to the mobile Accordion interface, the active item remains represented correctly and focus is transferred if the previously focused desktop/mobile control is about to become hidden.