Proof of concept: Details tag for accordeon

For a project involving Kirby CMS I needed a way for users to add an accordeon component inside the actual content area. So I hacked together a sort of plugin based on Bastian's Column plugin.

So in your kirby content text file or through the panel you can just add this:

[\accordeon... open summary: title 1]
content 1

[\accordeon... closed summary: title 2]
content 2

[\accordeon... closed summary:title 3]
content 3
Remember that in this example I had to add a \ for every tag in order to show the tag's syntax. In a normal use case you don't add these backward slashes.
Add an open or closed attribute to determine which ones are open and/or closed. Add a summary attribute to set the clickable title.
Tag content
Everything between the accordeon start and end tags is the text that will be either hidden or shown.
The above code would then be run as:
title 1

content 1

content 2

content 3

Get the plugin
Download the plugin here or get it from github
  • Unzip it and place the accordeon folder in kirby's plugin folder.
  • Add the CSS file to the content folder where you'll use accordeons and use the custom css loader or if you want it globally add it to your css folder and link to it in the header snippet.
Knows Issues
In the summary attribute you can't use the square bracket as text.