Version : 10.0 
Date modified : 2025-02-17

Expanding Accordions

A cool feature that Joomla offers is the ability to shorten a page by grouping together the sections of the page into expanding accordions. Not all websites have this feature added or enabled, so if this is something which interests you, please contact us for advice—and we can support you in implementing it.

Using accordions, what otherwise might be a very long and unappealing page allows website visitors to go specifically to one section of your page very quickly, click its title, and view the content. When they do this, an accordion will open up showing them the content.

The content can be text, images, video, document downloads—or anything else that a normal article can hold.

Here's an example of an accordion holding three pieces of information.

As outlined above, (among other areas) categories are mostly used for for Articles, Weblinks, Contacts, Diary/Calendars, Banners and DropFiles and Galleries.

When you work in these areas of the site, each will have its own category creation option, but they are all very similar in how they work.

Sometimes it is useful to have categories within categories or sub-categories. This sub-category idea leads us to consider the 'Parent' & 'Child' category hierarchy. For example, here is a way you might categorise content about birds and plants.

  1. Create two Parent Categories called "Animals" and "Plants".
  2. Create two Child Categories called "Birds" and "Mammals" and put these in the "Animals" category.
  3. Create two Child Categories called "Trees" and "Flowers" and put these under the "Plants" category.

So, the arrangement of these categories would be:

  • Animals
    • Birds
    • Mammals
  • Plants
    • Trees
    • Flowers

You certainly don't have to use sub-categories but in some cases it’s useful.

No matter where you work within the website control panel, creating content categories is pretty much ubiquitous! Most of the pages you see just wouldn't work without them, so even if you only create one or two categories to hold everything (and that's quite common), you still need to understand they are important.

When you create categories and assign content (articles, links, contacts) to categories, you should ideally have a pre-planned structure in mind.

Think how you might set up folders in a filing cabinet; first you create empty folders and label them in a practical way and then over time you create items and put them in the most appropriate folder. This way, you can organise your items in a more sensible way so you can access them more efficiently.

Article categories

A common approach that we take is to pull together articles which belong to the same menu drop-down area. For example, a website might have an "About Us" menu item, and underneath it may be a series of dropdown choices for different web pages.When these web pages are created, we can assign them to a category called "About Us".We can then tell the web page to display a list of those pages in the sidebar, so that when you're viewing any of the About Us pages, you have quick access to any of the other About Us pages—without having to go back to the top of the website and click on the About Us menu option to see the drop downs.

This is exactly how the page you're looking at right now works. The choices in the sidebar are articles assigned to the same category. In this case, the category is called "Section 4 Categories". In the sidebar we have configured the website to display articles that are assigned to that category and show them in alphabetically ascending order.

How to Create New Article Categories 

Creating new categories in Joomla 5 is a simple way to organize your website's articles. Remember, think of categories as organizing folders for your content!

1. Access Your Administrator Control Panel
2. Locate the Category Management Area

From the Control Panel, you need to navigate to the correct section:

  • Find the main menu on the left side of the screen.

  • Select Content.

  • From the submenu that appears, select Categories.

This page lists all the categories currently set up on your site.

3. Create a New Category

To begin creating a new category:

  • Look near the top of the category manager screen for the option New (a button). Select this option to open the Articles: New Category form.

4. Define Your Category Details

The form will help set up your new category. Pay close attention to these key fields:

  • Title: This is the primary and only mandatory name that visitors will see (e.g., "About Us," "News Items," or "year 6 Blog"). Choose a name that clearly describes the content.

  • Alias: This is used to create the category's web address (URL). It's best to leave this field empty; Joomla will automatically generate a clean, search-engine-friendly alias based on the title you provide.

  • Parent: Use this setting to establish your category's hierarchy.

    • If you want a main category (a top-level folder), select the "No Parent" option.

    • If you want a subcategory (a folder inside another folder, like "Year 6" within "Blogs"), select the existing main category you want it to belong to.

5. Finalise and Save

Once your title is set and the parent category is chosen:

  • Look for the options at the top of the page.

  • Select the Save & Close option.

Your new category is now active and ready to be used! You can now start writing articles and assigning them to this new, organized section.

 

You might see the Uncategorised category is already defined by default in your website. The Uncategorised category is used for articles that really don’t fit in any other category. It’s most used for small sites with only five or six articles; with so few articles, you wouldn’t really need to divide them into categories.

Larger sites (maybe yours) will have other categories already established and the Uncategorised item already removed - no problem if that is the case.

How does this work?

Let's put this into a live educational setting.

Whenever you see a page with expanding accordions such as a Year Group Curriculum page which displays information from multiple year groups, you should think of it as one page which brings together several other pages which are all part of a predefined category or group. 

Let's use a Year Group Curriculum page as an example; In the front end it looks like this:

Acc01.png

So what you're seeing above is a top level Year Group Curriculum page itself which is ‘container’ page which introduces the Year Group Curriculum sections and after the introduction, you see an expanding set of accordions, where each expanding section is an article about a year group. 

In the back end, you'll find an article called Year Group Curriculum. If you edit the article, it will look something like this:

Acc05.jpeg

Here you can see the introductory text and then an interesting piece of code—this is a plugin shortcode that tells the web browser to go and look in the website database and load a module ID number 192.

{loadmoduleid 192 }

It's not always ID number 192, by the way, but in my example here I'm using 192.

ModuleID 192 is a Joomla module which seeks out articles in a selected category, groups them together in a particular order, and then displays them in an accordion so that the title of each article becomes a section header of the accordion. 

Any time the system finds an article in that selected category, it will display it in that accordion.

This is helpful because if you add a new article to that category, it will appear in the accordion without you having to do any further editing.

In our example: if we look in the articles area for the website in question under content/articles, you'll notice that each of the year group pages is assigned to the Year Group Curriculum Pages category.

Acc04.jpeg

These are straightforward articles, but they all belong to the same category. Notice above that the article entitled "Year Group Curriculum" does not belong to the same category as "Year 1", "Year 2", "Year 3", etc.

This is the how we make the Year Group Curriculum page itself carry the other pages by setting it in a different category.

Any article that you want to display in the accordion can contain any standard information you have on any other article.