o

Paragraphs and accordions

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

The ‘Paragraphs’ module is similar to (and the successor to) the ‘field_collection’ module in that it bundles fields together in form and functionality.  We're not sure why they named it "paragraphs" because as far as we can tell, it doesn't really have anything to do with paragraphs -- in the sense of a written block of text. It deals with grouping fields together, and then handling these groups of fields as if they were a single unit.  So it enables you, rather than a field to an entity, to add a group of fields (allowing for single or multiple attaching), as if that were one field.  

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 could use it to help create expanding / contracting accordions as we have here:

 



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 ignore other items until they are ready to proceed. There are pros & cons of course, but let's skip that discussion and get into the nuts and bolts of how to do it:

 

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.