Plugin for Click to Expand?


(Bradley Boven) #1

I recently installed the spoiler-alert plugin because I mistakenly though it would allow users to create blocks of text that hide everything under it (for long posts) and allow users to click on it to expand it. Does anyone know of any plugins that exist that do this? I haven’t had any luck finding them.


(Kane York) #2

I don’t think such a plugin exists yet. If someone were to create it, I would advise you to have it “compile” into the HTML5 <details> and <summary> elements, because those elements are already whitelisted in the composer – no need to add a new whitelisted <div> class.

Maybe something like this:

[spoiler The *html* in my post]
https://meta.discourse.org/raw/15496/2
[/spoiler]

Turning into this:

<details><summary>Spoiler: The <i>html</i> in my post</summary><p><a href="https://meta.discourse.org/raw/15496/2">https://meta.discourse.org/raw/15496/2</a></p></details>
Spoiler: The html in my post

https://meta.discourse.org/raw/15496/2

Hmm, maybe I’ll make some preliminary styling for it:

/* Semantic styles for browsers without support for details/summary */
details * {
    display: none;
}
details[open] * {
    display: initial;
}

details summary {
    display: block;
}
details summary * {
    display: initial;
}

/* Actual styling */
details {
    background-color: #ebebeb;
    border-radius: 4px;
    padding: 3px;
}

details summary {
    margin: 3px;
    color: white;
    background-color: #838080;
    padding-left: 10px;
    width: calc(100% - 16px);
    border-radius: 3px;
}
details p {
    padding: 3px;
}



(Régis Hanol) #3

Unfortunately, these tags aren’t very well supported yet


(Jeff Atwood) #4

Wow no Firefox support at all yet? Brutal.