Paragraphs and accordions

By trholman on Feb 19, 2018 - 17:02pm
Paragraphs logo

The ‘Paragraphs’ module is similar to the ‘field_collection’ module in that it bundles fields together in form and functionality. Not only is the ‘Paragraphs’ module more stable than the ‘field_collection’ module, it also offers advantages beyond, such as exportability and the nesting of a paragraph within a paragraph and if desired, inside of another paragraph. Since the paragraphs are essentially modular content types that are able to be called in as a fields entity references, you can add multiple ‘Paragraphs’ into one field by referencing a ‘Paragraph’ that contains multiple fields. I can only dream of the possibilities, of course, there are limitations, but the versatility allows for features that would be much more tedious without the functionality provided by the ‘Paragraphs’ module. One example of the functionality afforded by the implementation of the module is that you can create accordions.


As illustrated by the three previous images, an accordion is an expandable content section that allows for real estate conservation. Expanding only one content section at a time provides the user a sense of control over the content in a progressive fashion. This allows the user to choose their focus and to ignore everything else until they are ready to proceed. Nevertheless, enough about the pros of utilizing accordions and on with the ease in which ‘Paragraphs’ allows for their creation.


In Drupal, the ‘Paragraphs’ module adds another structure called ‘Paragraph Types’. It is within this structure that ‘Paragraphs’ are created.

In the previous image, I am going to focus on the two ‘Paragraph Types’ called Content and Section. It is from those two ‘Paragraphs’ that I created the accordion layout. The first thing I did was create the ‘Paragraph Type’ called Content. I added the fields for Body and Title and limited their allowed number of values to one.

Once that was completed, I added the ‘Paragraph Type’ called Section. Inside of the Section ‘Paragraph Type,’ I added fields for the Heading and for the Content ‘Paragraph Type’. Note that when selecting another ‘Paragraph Type’, the default method is to select it by checking the box next to the ‘Paragraph Type’ that you want to reference. In this case, I reference Content.

And as you can see below, the Section ‘Paragraph’ now contains a field named Content that is an entity reference of the Content ‘Paragraph Type’.

I set the allowed number of values to one for the Heading and to unlimited for the Content field. Setting the Content field to unlimited allows for accordions to be added to the section under the form display to the desired quantity. Once I had the Section ‘Paragraph Type’ created, I added it to my Content type by selecting ‘Paragraph’ under “Reference revisions”. I likewise set this field to allow for an unlimited number of values so that multiple sections could be added to the form display.  

Now that the content fields are added, I still have to edit them so that it will function like an accordion. In this case, I used jQuery to create classes that could easily be added to modified twig templates.

Above we have three classes specified. All of the classes are being used in different ways to style and introduce functionality to the accordion. The click function is where the magic unfolds... so to say. First, the choice was made to hide the content with visibility hidden rather than use .hide(), because the .hide() function did not play well with some of the content we put into an accordion. It is still a viable option to use .hide() if it works for you. The next step is to edit specialized twig templates that were modified for the specific ‘Paragraph Types’. The most important being the one for the Content ‘Paragraph Type’.

As demonstrated, I surrounded the fields in the class ‘expander’ and added the class ‘down-arrow’ for styling purposes. The ‘heading’ class is then added to the div surrounding the title. This is only to style the title field. I edited the Section ‘Paragraph Type’ twig template only to add a class for styling purposes.

With all of this done, the accordion(s) is/are ready to use. Just remember to add styling and you can add as many accordions as you like.

Add new comment

Restricted HTML

  • Allowed HTML tags: <em> <strong> <code> <ul> <ol> <li> <p>
  • Lines and paragraphs break automatically.