Utilizing Existing Code to Create Horizontal Tabs on Your Drupal 8 Site

Scroll Down

Written by Chris Wright

February 25, 2019

Utilizing Existing Code to Create Horizontal Tabs on Your Drupal 8 Site

In Drupal 8, you can group content with field groups and even tabs. Sometimes though, you may want something a little more dynamic that changes on the fly using AJAX. You may want horizontal tabs or even vertical tabs. These can be created by extending the Field Group modules’ already existing functionality. If you are looking for vertical tabs, you can still use this, but by adjusting the CSS you can change how the tabs are placed and laid out.

For the purposes of this tutorial, install the following modules and the libraries will be used later on.

Prerequisites:

  1. Field Group module (field_group)
  2. Paragraphs module (paragraphs)
  3. jQuery library
  4. jQuery UI library

The Field Group module creates functionality for horizontal tabs. You can extend this functionality to use in your custom templates. In this example, the paragraphs module will be used to create the templates used.

Horizontal Tabs

First, create a paragraph type called “Tab”. On this paragraph type, create two fields. The first field should be called Title (field_tab_title) and the second field should be called Content (field_tab_content).

Create a custom block type called Horizontal Tabs (horizontal_tabs). It will contain a single field called Tab (field_tab) referencing the paragraph type of tab.

The last step before getting into the nitty-gritty is defining a theme library for your horizontal tabs. In thethemename/themename.libraries.yml, create a new library called horizontal-tabs. You can include a CSS file if you would like to override the default CSS but mostly, define the path to a JavaScript file which we will copy most of the JS from the Field Group module. Add jQuery as a dependency in the library. It should now look like this:

Now that you have the paragraph and block types created, you can begin creating the templates that will handle most of the logic.

The magic of the horizontal tabs happens in a JavaScript file in Field Group. Navigate to field_group/formatters/tabs/horizontal-tabs.js. There is a lot going on in this file but just focus on the following code:

You can see that the code looks for an element with a data attribute of '[data-horizontal-tabs-panes]'. In your template named field--block-content--horizontal-tabs.html.twig, add this data attribute to the wrapping div that wraps your paragraph content. It is also in this template that you will attach your themes’ horizontal-tabs library as well as the Field Group modules’ horizontal-tabs library. The template should look like this:

Now that you have the wrapping template and required data attributes taken care of, make a template for your tab paragraph type called paragraph--tab.html.twig.

As you can see in the above JS file, field_group looks inside your wrapping element for a details element. Inside this should be a summary element that contains field_tab_title. Outside of this should be a div containing field_tab_content. Your template should now look something like this:

That’s all you need to utilize the functionality of the horizontal tabs. Once you create several tabs and place the block on your site, you will now be able to view the tabs. You can adjust the CSS as needed to match the theme of your site.

The following image is a great example of what it could look like if you choose style your tabs vertically instead of horizontally.

If you run into an issue where your theme is not pulling the JS file from the module properly, you may need to copy the contents of this file and attach it to your horizontal tabs library. You can then make any tweaks that you may need inside this file to work specifically on your component.

Many modules can be extended like this to build your own functionality and components without completely rewriting the code yourself. One common situation you may find is that a lot of sites will require some sort of accordion component and the module can be used for that mostly the same way as the horizontal tabs. There are many other situations and components that you may need to build that can be accomplished in similar ways by utilizing existing code from modules. Why rebuild the wheel if you can save yourself time by using technology that someone else has proven to work?

Looking for more tips on how to better utilize Drupal, modules, and all of their features? Need help using vim or growing your web-presence? Check us out at codekoalas.com