If you publish to Pagecord by writing HTML or Markdown, whether through the CLI, the API, or Obsidian, you can now add collapsible sections to your posts using the HTML <details> and <summary> elements.
Note: There's no support for them in the Pagecord editor yet, so this is more of an early advanced feature for those people who publish via the API.
Here's one in action:
Click me to expand
Hi! 👋 This is a collapsible section. Everything inside stays hidden until a reader expands it.
Adding a collapsible section
Whether you're pushing HTML or Markdown via the API, the way you add a section is to use the standard <details> and <summary> elements like so (you can add raw HTML to Markdown files!):
<details> <summary>Read the full changelog</summary> <p>Everything in here stays hidden until the reader expands it.</p> </details>
The <summary> is the line readers click, while everything that follows within the <details> block stays hidden until they open it.
By default, the details element is collapsed. If you'd rather it started in an open state, add the open attribute:
<details open> <summary>Read the full changelog</summary> <p>This starts expanded, but readers can still collapse it.</p> </details>
A few things worth noting
- Markdown inside a
<details>block isn't reprocessed, so write its contents as HTML. - In email and some RSS feed readers, collapsible sections may appear expanded rather than folded. Nothing is ever hidden from your subscribers, it just doesn't collapse.
- The editor doesn't understand
<details>yet, so if you open a post or page containing one and save it in the editor, the collapsible section will be stripped out. Stick to the API, CLI, or Obsidian for editing these for now.
I'd like to be able to add support for <details> to the editor at some point, but it's not currently planned.
For those of you using the API in some way, hopefully you find this small change useful!