FlatPress Wiki

Author: Tongara, revised by Fraenkiman

This plugin makes it possible to hide content in spoiler tags and requires the BBCode plugin.

Example:

[spoiler]Hidden conntent inside the spoiler tag[/spoiler]

Example with spoiler title:

[spoiler="Title of the spoiler"]Hidden conntent inside the spoiler tag[/spoiler]

You can style the spoiler very easily by editing the spoilertags.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.

Example:

details > summary {
    list-style-type: none;
    color: #B83C32; /* Colors of the font of the spoiler title */
    font-weight: bold; /* Font style of the spoiler title */
    text-decoration: none;
    cursor: pointer;
}
 
details > summary:hover {
    text-decoration: underline;
}
 
details > summary::before {
    /* === Image as expand sign; size is not scalable === */
    content: url(../../../fp-plugins/spoilertags/img/expand_right.png);
    /* vertical-align: top; */
}
 
details[open] > summary::before {
    /* === Image as expand sign; size is not scalable === */
    content: url(../../../fp-plugins/spoilertags/img/expand_down.png);
    /* vertical-align: top; */
}
 
details {
    display: block; /* Do not deactivate */
    padding: 5px;
    /* === Framing of the hidden content inside the spoiler tag === */
    border: #ccc solid 1px;
    border-radius: 3px;
}
 
details:hover {
    /* === Framing of the hidden content inside the spoiler tag === */
    border: #999 solid 1px;
}
 
details[open] > summary {
    margin-bottom: 5px;
    /* === italic font of spoiler title when expanded === */
    font-style: italic;
}

https://www.clockworkknight.com/flat/?x=entry:entry200306-031247

spoilertags1_0_3.zip

Support

Please ask for help on the FlatPress Forum

• Added: css-file v0.2 with some design examples

• Fixed: The plugin crashes when the BBCode plugin is not enabled. Thanks to Arvid for the hint

• Added polyfill-JavaScript for IE and Edge in the body
• Added Instructions