In the Decap CMS markdown editor we would like to add a new block component option to handle collapsible sections. At the core of this component would be the standard HTML elements like this:
<details>
<summary>text of the title</summary>
Text of the detailed content
</details>
And it would behave like this:
text of the title
Text of the detailed content
There is no need to program any of the toggle behavior, that will come automatically, and we should have styles set up already for this as well. We just need to ease the creation of these styles of elements in
Here is the Decap documentation about how to create and register a custom component: https://decapcms.org/docs/custom-widgets/. Note that we will need to registerEditorComponent, most likely in the public/admin/index.html file.
The name of the new component should be "Toggle Section". Inputs for the component should be
title (required)
Will be placed within the <summary> tag and shown at all times
content (required)
Will be placed within the content (after the summary tag), and will only appear when the toggle is open.
group (optional)
This would be a single string that gets mapped directly to the name attribute of the details element. This provides a radio-type behavior for all details in the same group, if one is opened all the others will close (this is default HTML behavior, we only need to supply the name attribute. See example: https://nikitahl.com/native-html-accordion
For the content, ideally we could be putting Markdown in here, and this would be rendered properly in the preview. If that proves problematic we could just leave plain text for now and come back to complex content later.
In the Decap CMS markdown editor we would like to add a new block component option to handle collapsible sections. At the core of this component would be the standard HTML elements like this:
And it would behave like this:
text of the title
Text of the detailed contentThere is no need to program any of the toggle behavior, that will come automatically, and we should have styles set up already for this as well. We just need to ease the creation of these styles of elements in
Here is the Decap documentation about how to create and register a custom component: https://decapcms.org/docs/custom-widgets/. Note that we will need to
registerEditorComponent
, most likely in the public/admin/index.html file.The name of the new component should be "Toggle Section". Inputs for the component should be
<summary>
tag and shown at all timesname
attribute of thedetails
element. This provides a radio-type behavior for all details in the same group, if one is opened all the others will close (this is default HTML behavior, we only need to supply the name attribute. See example: https://nikitahl.com/native-html-accordionFor the content, ideally we could be putting Markdown in here, and this would be rendered properly in the preview. If that proves problematic we could just leave plain text for now and come back to complex content later.