Free This module comes in the Free package and also in Pro.
Webal Accordion shows a list of titles, and when a visitor presses a title, it opens to show its content. Use it for questions and answers, for steps, or for details that you want to keep tidy.
It uses the browser's own way of opening and closing, so it works with the mouse, the keyboard and a screen reader, even when scripts are turned off. The items can be typed, taken from Joomla articles, or both. FAQ mode adds hidden data that search engines read for questions and answers.
Add it to a page
- Log in to the Joomla administrator, and in the menu on the left choose Content, then Site Modules.
- Press New, and a list of module types opens so that you can choose from it.
- Choose Webal Accordion from the list of module types, which starts a new module of that kind.
- Type a Title for the module, using a name that tells you what the module is for.
- On the Module tab, choose the Content source: Typed items, Joomla articles, or both in the order you want.
- For typed items, press Add under Items. Type a Title and the Text of the item, and for a question type the question as the title.
- Set Open by default to Yes on any item that should already be open when a visitor first sees the page.
- Press Add again for each further item that you want in the accordion.
- Open the Accordion tab and choose the Heading level of the titles. Pick the level just under the heading above the accordion, for example Heading 3 under a Heading 2 section heading, and do not skip a level.
- If the items are real questions with answers, open the FAQ tab and set FAQ mode to Yes. Do this for one accordion on a page only.
- Go back to the Module tab, then open the Position list in the right-hand column and choose a position. A position is a named place in your template where a module can go.
- Under Title in the same column, choose Show or Hide, because the module prints no heading of its own and either choice works. The title names the accordion for screen readers.
- Press Save, and wait until the message "Module saved." appears.
- Open the Menu Assignment tab. In Module Assignment, choose Only on the pages selected, so that the module appears only on the pages that you pick.
- Beside Assign to Menu Items, press None, because every page stays ticked until you do this.
- Type the name of the page in the search box, then tick that page so that the module appears there.
- Press Save & Close, which saves the module once more and closes the editing screen.
- Open that page on your site and look for the module in the position that you chose.
Options
Module tab
| Option | What it does | Default |
|---|---|---|
| Content source | Where the items come from: Typed items, Joomla articles, Typed items then Joomla articles, or Joomla articles then typed items. | Typed items |
| Items | One row for each item, up to 50. Each has a title and either text or the modules of a module position. Rows with no title or nothing to show are left out. Shown for typed items. | No rows |
| Article source | Which Joomla articles feed the block, how many, in what order, and how much of each is shown. See Article source. Shown for articles. | Group defaults |
| Open the first article | Yes opens the first item that comes from an article when the page loads. Typed items have their own Open by default setting. Shown for articles. | No |
| Show a Read more link | Yes adds a Read more link to the full article under the text of each article item. Shown for articles. | Yes |
Options in each item row
| Option | What it does | Default |
|---|---|---|
| Title | The words visitors press to open the item. For a question, type the question. Keep it short. Up to 300 characters. | Empty |
| Shows | What opens under the title: Text that you type, or The modules of a module position. | Text |
| Text | The text under the title. You can use paragraphs, line breaks, bold, italic, lists and links. Anything else is removed. Plugin tags such as {loadmodule} do not run in typed text. Up to 10,000 characters. Shown for Text. | Empty |
| Module position | The name of a position, for example my-faq-extra. Every published module in that position shows under the title. A module that is already being shown, including this one, is left out. Shown for a module position. | Empty |
| Icon | An optional small picture before the title. It is decoration, so the title must make sense without it. | Empty |
| Open by default | Yes starts with this item open. If only one item may be open at a time, only the first item set to open starts open. | No |
| Image | An optional picture shown above the text. It is made smaller and converted to WebP for fast loading. Shown for Text. | Empty |
| Image description | What the picture shows, for people who cannot see it. Leave it empty only if the picture is decoration. Shown for Text. | Empty |
| Link | Where the item links to: nothing, a page of the site, an article or any web address. Explained in Options shared by many modules. Shown for Text. | Nothing (no link) |
| Link text | The words of the link under the text. Empty uses Read more. Shown for Text. | Empty |
| Animation of this part | How this part of the block appears when it scrolls into view. By default it plays the same effect as the whole block. | Follows the module |
Tip. When caching is on for this accordion, only the modules of the position that allow caching are shown. A login box or a shopping cart is left out, because a cached copy would be shown to every visitor.
Accordion tab
| Option | What it does | Default |
|---|---|---|
| Only one item open at a time | Yes means opening an item closes the one that was open. In an older browser that cannot do this, every item opens on its own. | Yes |
| Heading level of the titles | The level of each item title in the page outline, from Heading 2 to Heading 6. Plain text (not a heading) is for an accordion inside content that already has its own headings. | Heading 3 (h3) |
| Title look | How large the titles look. This never changes the heading level. | Looks like heading 5 |
| Title weight | Same as the theme, Light, Normal or Bold. | Same as the theme |
| Title letter case | Same as the theme, UPPER CASE, lower case or Capitalise Each Word. | Same as the theme |
| Title colour | The colour of the titles. Light and White are for text on a dark background. Dark is for text on a light background. | Same as the theme |
| Text size | How large the text inside an open item looks: Normal text, Lead paragraph (larger) or Small text. | Normal text |
| Dividers and boxes | A line between items, Each item in its own box, or Nothing between items. | A line between items |
| Open and close sign | The small sign that shows an item can be opened: Arrow (turns when open), Plus (becomes a minus when open), or None. | Arrow (turns when open) |
| Where the sign sits | After the title, or before the title. It follows the reading direction of the language. Shown when there is a sign. | After the title (right in English) |
FAQ tab
| Option | What it does | Default |
|---|---|---|
| FAQ mode | Yes adds hidden search engine data (schema.org FAQPage) built from the item titles and their text, so that search engines can read the questions and answers. | No |
Tip. Use FAQ mode on one accordion per page, because Google reads one FAQPage per page. If two accordions on one page both use it, search engines may not use either. Use it only for real questions with their answers. An item is left out of the data when its answer is not the whole visible text: a module position, a cut excerpt, text over 5,000 characters, or text that a plugin changed.
Layout and Animation tabs
The Layout tab has the shared General, Spacing, Width and Colour scheme groups, and the Animation tab has Animation and Parallax. They are explained in Options shared by many modules. Each typed item also has its own animation.
Result
Accessibility
- Each item uses the browser's own open-and-close control. Enter or Space opens and closes it, a screen reader announces it as open or closed, and Tab moves between items.
- The title inside each item is a real heading at the level you choose, or plain text if you choose that.
- The sign and the icon are only decoration, so screen readers skip them.
- Every row is at least 44 pixels high, and the open and close animation is off for visitors who prefer less motion.
- The dividers and signs stay visible when a visitor uses Windows high contrast mode.
Accessibility. Give every accordion on a page its own module title, because the title names the accordion for screen readers.
Accessibility. Known limit: how NVDA, JAWS and VoiceOver read a heading inside an item has not been tested yet. Chrome shows the item named by its title, with the heading kept. If a screen reader drops the heading, use Plain text as the heading level.
Other languages
Titles and text are yours, so they stay as you typed them. Joomla's module cache does not know the language of a multilingual site, so give each language its own copy of the module. Set its Language on the Module tab, or set its Caching to No caching on the Advanced tab. On a right-to-left site the open and close sign follows the reading direction.
Tips
- For modules inside an answer, use The modules of a module position. Choose a position of your own that your template does not draw, and use a different position for each accordion.
- Run content plugins for articles is off by default, so turn it on only if you need tags such as {loadmodule} to work in article text.
- Headings inside an article are not changed, so keep headings out of answers or start them below the accordion's level.
- A random order and the publish dates of articles are worked out once and kept for the module's Cache Time.
- Do not animate an accordion at the very top of the page, because it stays invisible until the page scripts have started.