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!

About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.