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

businessman using tablet

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

Panel body
Text (formatted, long)
Panel title
Text (formatted)

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

Entity reference revisions

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:


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' -->
  <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' -->
<!-- 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 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.