I found a post on the old Flatpress archive forum asking for this all the way back in 2012, but no one ever answered or took up the challenge. I decided to change that, and you can download my plugin by clicking HERE.
With this post, I'll teach you how to use my Flatpress Spoiler Tags Plugin.
Below is a standard spoiler tag. You can use it by simply wrapping your content in [spoiler][/spoiler] tags.
The spoiler has a default text of "Spoiler", as shown below:
When clicked, it looks like this (what you will see will vary by whatever you put between the tags):
You can define the text of the clickable spoiler field by defining the attribute like [spoiler=YourText] on the opening of the tag.
This can be seen below with the word "Spoiler1":
Sadly, BBCode doesn't allow spaces in attributes and will stop parsing after the first word. Luckily, we can use a workaround to add a space to our spoiler attribute using an " " between words.
This is shown below with the words "Spoiler 2":
You can style the spoiler very easily by editing the spoiler.css file found in the plugin's /res folder. The code uses HTML5's "<details>" and "<summary>" elements, making it very easy to create hidden content on websites.
Sadly, these elements currently don't work for users of Internet Explorer, but according to user "Finesse" on THIS post on a StackOverflow question on this issue, adding the following polyfill inside the "<body>" of your blog will fix this:
Code: Select all
<script src="//cdn.jsdelivr.net/npm/details-polyfill@1/index.min.js" async></script>
That's it, I hope you enjoy using the plugin!
You can see a live example of it working at https://www.clockworkknight.com/flat/?x ... 306-031247
Credit of course goes to Hydra & NoWhereMan for their BBCode plugin that comes as standard with Flatpress, the "BBCode Plugin Tips" on the wiki, and of course "Finesse" from StackOverflow for the Internet Explorer fix.