Add Collapsible Blocks to Text-Heavy Nodes in Drupal 8
Long articles with many sections often discourage users from reading. They start reading and usually leave before reaching half of such articles.
To avoid this type of user experience, I recommend to group each section in your article into a collapsible tab. The article reader then will be able to digest the text in smaller pieces.
The Collapse Text Drupal 8 module adds editor filter plugin to your editor. You then will be able to create collapsible text tabs with a tag system similar to HTML.
Read on to learn how to use this module!
Step #1. Install the Required Module
- Open the terminal application of your computer
- Go to the root of your Drupal installation (the composer.json file is located inside this directory)
- Type the following command:
composer require drupal/collapse_text
- Click Extend
- Scroll down until you find the Collapse Text module and enable it
- Click Install
Step #2. Create an Editor Role
- Click People > Roles > Add role
- Enter the Role Name Editor and click Save
- Click the dropdown besides Editor and select Edit permissions
- Check these permissions:
- Comment
- Edit own comments
- Post comments
- View comments
- Contact
- Use the site-wide contact form
- Filter
- Use the Full HTML text format
- Node
- Article: Create new content
- Article: Delete own content
- Article: Delete revisions
- Article: Edit own content
- Article: Revert revisions
- Article: View revisions
- Access the Content overview page
- View published content
- View own unpublished content
- System
- Use the administration pages and help
- View the administration theme
- Taxonomy
- Tags: Create terms
- Access the taxonomy vocabulary overview page
- Toolbar
- Use the toolbar
- User
- Cancel own user account
- View user information
- Comment
- Click Save permissions
Step #3. Create a User with the New Editor Role
- Click People > Add user
- Create a user with the Editor role
- Click Create new account
Step #4. Add the Plugin to the Text Format
- Click Configuration > Text formats and editors
- Click the Configure button for the Full HTML format
- Enable the Collapsible text blocks filter and check that it comes after the other two filters specified in the description
The Full HTML format has these two filters disabled by default, so we are good to go.
- Click Save configuration
Step #5. Create Content
- Log out and log back in as the user with the Editor role
- Click Content > Add content
- Write a proper title for the node
The Tabs Structure
Each tab is declared between a pair of tags.
To show an opened tab (not collapsed at all) you put the text between the [collapse]
and [/collapse]
tags.
To show a collapsed tab you put the text between the [collapsed]
and [/collapsed]
tags.
The opening [collapse]
and [collapsed]
tags support two “attribute values”:
title
class
If you don’t specify a title attribute, the module will take the first title available between the [collapse]/[collapsed]
tags.
It is possible to nest collapsible tabs.
- Finish editing the node form and click Save
The image is floated, that is a Bartik specific style. Let’s apply some CSS.
Step #6. Basic Styling
Hint: I’m going to edit the original core theme files because I’m working on a sandbox environment. That is not recommended on a production server. As a matter of fact, it is not a good practice at all. If you want to improve your Drupal theming skills, take a look at this OSTraining class.
- Open the file core/themes/bartik/css/components/field.css
- Add this code to the end of the file:
@media all and (min-width: 560px) { .node .field--type-image { float: none; }
- Open the file core/themes/bartik/css/components/node.css
- Add this code to the end of the file:
/* Collapse Text Styles */ .open, .shut { font-family: sans-serif; } .open { background: black; color: white; } .shut { background: #444; color: #CCC; } summary { background-color: red; color: transparent; } .nested1 { background-color: rgba(224, 110, 108, 0.25); }
- Save both files
- Click Configuration > Performance > Clear all caches
- Refresh the site
I hope you liked this tutorial. Thanks for reading!
What would you say is the main difference between this one and this https://www.ostraining.com/blog/drupal/accordion-button-in-ckeditor/
Which would you recommend as a more viable or user friendly option?
Hi Ravi,
I think you cannot nest tabs with the accordion button
Ok. Thank you.
Cool module and this was a very good instructions.
my only concern is the [b]CORE HACKING[/b] fir the theme.
Creating a subtheme of bartik wiukd be more Drupal standard.
Hi Mohammad,
thanks for your remark. There is a hint (step #6) preventing readers about that. This OSTraining D8 theming class explains everything further. There’s even a video describing the creation of a Bartik subtheme.
https://www.ostraining.com/class/d8-themes/
Regards