How to create a Custom Accordion in Drupal 8 using the Paragraphs Module

  1. Drupal Freelance
  2. Services
  3. Accessibility
businessman using tablet

Sometimes it's quite hard to find the module that does the job exactly as specified in the requirement, then you need a custom module.

A custom module should be written only it is necessary. Before you write your own module, it's wise to search the contributed modules first. You might be able to tweak a existing module, this is definitely a good way of packaging up any code snippets that you use frequently.

In this article I will show you how to create an Accordion using the Paragraphs contributed module with very little code inside the Twigs templates

1. Install the paragraphs module with Composer and create a new Paragraph Type

You need first to download and install the paragraphs contributed module. My recommendation is to do it using this Composer command:

composer require drupal/paragraphs

Then create this new Paragraph type from /admin/structure/paragraphs_type and called it: Accordion item with machine name accordion_item

LABEL
MACHINE NAME
FIELD TYPE
Panel body
field_panel_body
Text (formatted, long)
Panel title
field_panel_title
Text (formatted)

And add this paragraph as new field inside your content type:

LABEL
MACHINE NAME
FIELD TYPE
Accordion
field_accordion
Entity reference revisions

2. Overwrite the default Twig Templates

In your custom theme (you can install my code snippet examples and try them in your local environment by downloading the entire project from the Github page) I added these 4 Twig files:

drupal/htdocs/themes/maria_consulting/templates/field/paragraph--accordion-item--default.html.twig
drupal/htdocs/themes/maria_consulting/templates/field/field--node--field-accordion.html.twig
drupal/htdocs/themes/maria_consulting/templates/field/field--paragraph--field-panel-title--accordion-item.html.twig
drupal/htdocs/themes/maria_consulting/templates/field/field--paragraph--field-panel-body--accordion-item.html.twig

I want this templates to output this HTML:

<!-- BEGIN OUTPUT from 'themes/maria_consulting/templates/field/field--node--field-accordion.html.twig' -->
<!-- BEGIN OUTPUT from 'themes/maria_consulting/templates/field/paragraph--accordion-item--default.html.twig' -->
<div class="panel panel-default paragraph-accordion" id="paragraph-accordion">
  <div class="panel-heading">
    <h4 class="panel-title">
      <a data-parent="#paragraph-accordion" data-toggle="collapse" href="#par-18" aria-expanded="false" class="collapsed">
        <!-- BEGIN OUTPUT from 'themes/maria_consulting/templates/field/field--paragraph--field-panel-title--accordion-item.html.twig' -->
        1. Install the paragraphs module with Composer
        <!-- END OUTPUT from 'themes/maria_consulting/templates/field/field--paragraph--field-panel-title--accordion-item.html.twig' -->
      </a>
    </h4>
  </div>
  <div class="panel-collapse collapse" id="par-18" aria-expanded="false" style="height: 0px;">
    <div class="panel-body">
      <!-- BEGIN OUTPUT from 'themes/maria_consulting/templates/field/field--paragraph--field-panel-body--accordion-item.html.twig' -->
      <p>Your body text here</p>
      <!-- END OUTPUT from 'themes/maria_consulting/templates/field/field--paragraph--field-panel-body--accordion-item.html.twig' -->
    </div>
  </div>
</div>
<!-- END OUTPUT from 'themes/maria_consulting/templates/field/paragraph--accordion-item--default.html.twig' -->
<!-- END OUTPUT from 'themes/maria_consulting/templates/field/field--node--field-accordion.html.twig' -->

I really recommend to enable to Twig debug on your local environment by editing the sites/default/services.yml

  twig.config:
    # Twig debugging:
    #
    # When debugging is enabled:
    # - The markup of each Twig template is surrounded by HTML comments that
    #   contain theming information, such as template file name suggestions.
    debug: true

From the theme debug now is very obvious what is the content of each Twig file, you can find it in my Github Project, please read the article on how to install Drupal 8 using Docker.

1. Accessibility

cyber security and digital data protection concept

Drupal 8 custom drop down menus, blocks, breadcrumbs, url path aliases,&nbsp;light box, search offer lot of options on how to access and find your relevant content.

2. Integration

dark servers center room with computers and storage systems

Drupal can be integrated with complex system that uses other databases such as PostgreSQL, MongoDB, Oracles or even other Custom MySQL Servers.

3. Development

smart phones and globe connections world internet

Drupal Bootstrap Sub Themes are ideal to implement responsive solutions for Mobile and Tablets with screen resolutions from 320px up to 800px!

4. Multilingual

multi language translator

Drupal is a very powerful tool to set up multilingual web sites: Internationalisation module helps to easily translate content in different languages.