Learn how to group field formatters using the Field Group module.
We’ll cover the following:
- How to create accordions
- Install jQuery UI accordion module
- Create an HTML element field group
Composer command
composer require drupal/jquery_ui_accordionTranscript
Trainer (00:00):
In the previous video, we looked at how to organise field widgets into collapsible field set and tabs. And here you can see the two tabs that we created; product details and product options. Now, I want to show you how to organise field formatters, because field group can also be used to organise and group field formatters, which are displayed on this page. Let’s go ahead and group the formatters in the same groups as the field widgets, product details and product options. But this time, we’ll display them as accordions instead of tabs.
Trainer (00:43):
Now, before we do that, let me just quickly fill out the product category and also product tags, just so that we have some actual content. Now let’s go to structure content types, and then click on manage display on the product row, and then full content. Click on add field group. And from the add a new group dropdown, select accordion.
Trainer (01:10):
Now this field group is the same as tabs. It is used to group other field groups. And then inter accordion into the label field. This label won’t be shown so you can enter in whatever you want. And then click on save and continue, and then create group. Then scroll down and move the field group all the way to the top and then click on save.
Trainer (01:36):
Now we need to create the individual accordion items, and that would be for the product details and options. Click on add field group again, and from the add a new group dropdown, this time select accordion item and in label entering product details, and then click on save and continue, then create group and then scroll down and move it under accordion. And let’s also move product summary and price under product details. And then scroll down and click on save. And let’s click on add field group again and select accordion item, and this time entering product options and click on save and continue, create group. And then let’s move this one below product options and this time, move product category, product tags, and product type into product options and then click on save.
Trainer (02:38):
Now that we have everything set up, let’s test it out. So let’s go to content and I’ll open that up in a new tab, and then let’s go to a product page. And straightaway, you can see that this doesn’t look like an actual accordion. It kind of looks broken. And the reason for this, is that Drupal 9, which is the version of we are using in this recording, no longer comes with the jQuery UI Accordion library, which is used for the accordion functionality. So what we need to do, is download a third party module, which adds up back in and the module is called jQuery UI Accordion. If you want to learn more about the module, just head over to drupal.org/project/jquery_UI_accordion.
Trainer (03:26):
Let’s go ahead and download this module. So I’ll jump into my terminal and type in composer require drupal/jquery_ui_accordion. And then if we go back to our site and let me close this tab, then go to extend and search for jQuery, and you should see two modules, jQuery UI, and jQuery UI Accordion. Check jQuery UI Accordion, click on install and it will tell us that we need to install jQuery UI.
Trainer (04:03):
And before we test out the accordion functionality, let’s go to configuration and then performance, and let’s clear all the caches. Then if we go back to our product page and refresh, we should see an accordion with two accordion items. So if we click on product details, we can see the product summary and price. And then if we click on product options, we can see the product category, tags and type.
Trainer (04:31):
If we refresh again, you can see that both accordion items are collapsed by default. Let’s now configure things so that product details is opened by default. Let’s jump back to the other browser and then go to structure, content types, and then manage display, then full content, and then click on the cog wheel on the product details field group, and then change default state from closed to open, then click on update and then save. And now if we refresh, the product details accordion item is opened by default.
Trainer (05:13):
The final group type I want to show you how to use is called HTML element. This is useful for when you want to wrap fields with specific HTML markup. Let’s jump back to the manage display page and then click on add field group. And from the add a new group dropdown, select HTML element, and then in label, let’s add body wrapper, and then click on save and continue. From this page, you can configure the group type and you can change this later on by clicking on the cog wheel. But there are two important options on this page. The first one is element. This allows you to specify the exact element which will be used. In this case, it will be a div. And then down here in extra CSS classes, we can add in a custom class.
Trainer (06:08):
So I’ll enter in body–wrapper. And this means that any field which is added to this field group will be wrapped with a div, with a class of body–wrapper. So click on create group and then scroll all the way down and let’s move body wrapper below the accordion. And let’s add the body field into body wrapper, and then scroll down and click on save.
Trainer (06:38):
And then if we click on the cog wheel on the body wrapper field group, we can modify the element and also the CSS classes, if we need to later on. Now, if we go to the product page and then refresh, we won’t see anything different. However, if we inspect the body text, we should see a div with the class of body–wrapper, wrapping the body field formatter. And here, you can see the div and the class.
Trainer (07:13):
The HTML element group is handy for when a front-end designer asks for fields to be wrapped with specific elements. And no custom code is required. Just create a group and add fields to the group and you’re done.