Creating a user editable collapsible sections on a node or other entity
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
- Paragraphs - https://www.drupal.org/project/paragraphs
- Display Suite - https://www.drupal.org/project/ds
- Collapse Text- https://www.drupal.org/project/collapse_text
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.
After doing the regular stuff like turning modules on and whatnot, I first added a paragraph bundle called HTML block
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.
I chose to use the full content view mode of the HTML block paragraph bundle of the manage display tab of my content type.
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
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.
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
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.