===== Spoiler Tags =====
Author: [[https://www.clockworkknight.com|Tongara]], revised by [[https://frank-web.dedyn.io|Fraenkiman]]

==== Description ====
This plugin makes it possible to hide content in spoiler tags and requires the [[doc:plugins:standard#bbcode|BBCode]] plugin.

Example:
<code>[spoiler]Hidden conntent inside the spoiler tag[/spoiler]</code>

{{:res:plugins:tongara:spoiler_close.png?100|}}

{{:res:plugins:tongara:spoiler_open.png?300|}}

Example with spoiler title:
<code>[spoiler="Title of the spoiler"]Hidden conntent inside the spoiler tag[/spoiler]</code>

{{:res:plugins:tongara:spoiler_with_spoiler_title_opened.png?300|}}

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:
<code css>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;
}

</code>


==== Demo ====
[[https://www.clockworkknight.com/flat/?x=entry:entry200306-031247|]]

==== Download ====
{{ res:plugins:tongara:spoilertags1_0_3.zip |}}

**Support**

Please ask for help on the [[https://forum.flatpress.org/viewtopic.php?f=4&t=129|FlatPress Forum]]

=== Changelog: ===

== 2022-12-18 (V1.0.3) ==
  * Added: css-file v0.2 with some design examples

== 2022-12-14 (V1.0.2) ==
  * Fixed: The plugin crashes when the BBCode plugin is not enabled. Thanks to Arvid for the hint

== 2022-10-15 (V1.0.1) ==
  * Added polyfill-JavaScript for IE and Edge in the body
  * Added Instructions