Stan Ascher

We were approached to build out a way for users to have collapsible sections on these node types called content.  The paragraphs module was a perfect fit for this solution 

Here are the modules used

1. Paragraphs - https://www.drupal.org/project/paragraphs
2. Display Suite - https://www.drupal.org/project/ds
3. Collapse Text- https://www.drupal.org/project/collapse_text

I will assume you know how to use Drupal input formats,  the paragraphs module and display suite, if you don't check out  this video here about paragraphs, and  this one here about display suite. 

The requirements

 These sections needed to be under workbench access control and they needed to have a custom style. The users wanted HTML regions to start, but then they want dynamic view blocks and other widgets. For the article, I'll just be talking about the html blocks. 

Step 1

After doing the regular stuff like turning modules on and whatnot, I first added a paragraph bundle called HTML block 

Step 2

On a content type, this one called a topics page, I created a paragraph field and set it to use my new HTML block paragraph bundle. I made it so users can put in an unlimited amount of items. 

Step 3

I chose to use the full content view mode of the HTML block paragraph bundle of the manage display tab of my content type.

Step 4

In my input formats, I created a new input format called collapse text which lets amost all strings through, including php and I included the collapse text evaluation 

 You can find more about the collapse text module here.

Step 5

On the full content view of the HTML block paragraph bundle, I hid all the fields and created a DS code field to wrap the paragraph entry in a the text "[collapse collapsed]" and [/collapse]. This is functionality from the collapse text module, which when used in conjunction with a WYSiWYG editor, will allow you create collapsible sections. 

Step 6

On the display suite field, I put two tokens in, one for the title field on the paragraph bundle, and one for that long text html felid. For the title, I wrapped it an h2 tag. The collapsetext module looks for the first H@ and makes that its legend

Step 7

Once I got that working on the node, I needed to customize the CSS. I copied the CSS from the collapse text module and put it inside a SCSS file that compiled into my theme. With a background image it came out looking pretty good.