How to Display Your Fields Inside Tabs in Drupal 8
Extensive nodes (or other types of entities) with many text fields, such as biographies, often remain unread because of the huge (and discouraging) amount of text.
The Drupal 8 “Field Group” module allows you to group fields and to present them in containers like vertical or horizontal tabs, accordions or just plain wrappers. It lets you group fields in the frontend of your site, and in the backend as well.
Keep reading to learn how to use this module!
Step #1. – Install the Required Module
According to the project page, Drupal versions above 8.3 require the 8.3 branch of the module. You have to force Composer to download this specific version.
- Open the Terminal application of your PC
- Go to the root of your Drupal installation (the composer.json file is located inside this directory)
- Type the following command:
composer require "drupal/field_group:^3.0"
- Click Extend
- Scroll down until you find the Field Group module and check it
- Click Install
Step #2. Create the Content Type
For the purpose of this tutorial, you will create a content type with this structure.
- Content type title: Vertebrate
- Field Image
- Text field (Introduction)
- Field Image
- Text field (First Part)
- Field Image
- Text field (Second Part)
- Field Image
- Text field (Conclusion)
- Click Structure > Content types > Add Content type
- Give the Content type a proper name, click Save and manage fields
- Click Add field
- From the dropdown select Image and write a proper label
- Click Save and Continue
- Leave the defaults and click Save field settings
- Click Save settings
- Click Add field
- Select Text (formatted long) and give it a proper label
- Click Save and continue
- Click Save field settings
- Click Save settings
- Repeat the process 3 more times for the image and text fields
- Delete the Body field
The “Manage fields” screen on your computer should look more or less like this:
Step #3. Group the fields
The “Field Group” module works on the display of the node and in the form display as well.
- Click Manage form display > Add group
- Select Fieldset
- Click Save and continue
- Click Create group
- Repeat the process and create 3 more Fieldset groups
- Rearrange the items according to the image using the cross handles
- Click Save
- Click Manage display > Add group
- This time, select Tabs
- Click Save and continue
- Change the direction to Horizontal
- Click Create Group
You can add an ID and CSS classes to the container to ease the styling process.
- Click Add group
- Select Tab and give it a proper label
- Click Save and continue
- Select Default state OPEN (for the first tab, the other tabs will have Default state CLOSE)
- Click Create group
- Repeat the process with the other three tabs
- Hide the image labels
- Rearrange the items, take care of the indentation
- Click Save
Step #4. Create Content
- Click Content > Add Content > Vertebrate
The form fields are now grouped in four fieldsets. This is very practical for editors.
- Fill out the form, upload images and click Save
Take a look at the node. All content is grouped in horizontal tabs. Users will definitely have a better reading experience.
Please, leave us your comments below. Thanks for reading!
A great tip to show the fields, thanks
Thanks Adrian!
Cheers!
You are HERO!
Thank you! Very good tutorial!
But one problem is that this function does not work with Bootstrap themes. It works for me with the Danland theme but when I change to a Bootstrap subtheme the Tabs comes after each other and only the Tabs are seen but rest is blank.
Great, thank you
Concise Drupal 8 field_group module intro, well done!
Thanks!
Perfect! Just what I was looking for.
Excellent! So glad we could be of help to you!