How to Display Your Fields Inside Tabs in Drupal 8

How to Group Entity Fields in 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"

Type the following command

  • Click Extend
  • Scroll down until you find the Field Group module and check it
  • Click Install

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

Give the Content type a proper name and click Save

  • Click Add field
  • From the dropdown select Image and write a proper label
  • Click Save and Continue

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 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:

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

Click Manage form display and then click Add group

  • Select Fieldset
  • Click Save and continue

Click Save and continue

  • Click Create group
  • Repeat the process and create 3 more Fieldset groups

Repeat the process and create 3 more Fieldset groups

  • Rearrange the items according to the image using the cross handles
  • Click Save

Click Save

  • Click Manage display > Add group

Click Manage display and then click Add group

  • This time, select Tabs
  • Click Save and continue

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.

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

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

Repeat the process with the other three tabs

  • Hide the image labels
  • Rearrange the items, take care of the indentation
  • Click Save

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

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.

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!

Author

  • Jorge Montoya

    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.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

10 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Adrian Cid Almaguer
Adrian Cid Almaguer
5 years ago

A great tip to show the fields, thanks

Martin Petráš
Martin Petráš
4 years ago

You are HERO!

Mistah7
Mistah7
4 years ago

Thank you! Very good tutorial! 

Mistah7
Mistah7
4 years ago

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.
  

Alen
Alen
3 years ago
Reply to  Mistah7

Great, thank you

Darrell Ulm
Darrell Ulm
3 years ago

Concise Drupal 8 field_group module intro, well done!

Mikall Hill
3 years ago
Reply to  Darrell Ulm

Thanks!

Scott C.
Scott C.
3 years ago

Perfect! Just what I was looking for.

Mikall Hill
3 years ago
Reply to  Scott C.

Excellent!  So glad we could be of help to you!

10
0
Would love your thoughts, please comment.x
()
x