Spoiler Alert: You can Accordion Spoilers

Spoilers aren't just for race cars

You've seen those buttons. They're like hot teen tea, like the One Ring. They want to be clicked. They want to shout their secrets. Can you blame them? Can you help yourself? Click on!

Label One

You just can't tell what's behind these spoilers

Label the Second

"Well, Prince, so Genoa and Lucca are now just family estates of the Buonapartes. But I warn you, if you don’t tell me that this means war, if you still try to defend the infamies and horrors perpetrated by that Antichrist—I really believe he is Antichrist—I will have nothing more to do with you and you are no longer my friend, no longer my ‘faithful slave,’ as you call yourself! But how do you do? I see I have frightened you—sit down and tell me all the news."
It was in July, 1805, and the speaker was the well-known Anna Pávlovna Schérer, maid of honor and favorite of the Empress Márya Fëdorovna. With these words she greeted Prince Vasíli Kurágin, a man of high rank and importance, who was the first to arrive at her reception. Anna Pávlovna had had a cough for some days. She was, as she said, suffering from la grippe; grippe being then a new word in St. Petersburg, used only by the elite.

Wonderful Third Panel Label

And what of mixed media? Can it be done?

Ar, me hearties!

by Wikimedia Commons

A few, uh, provisos

The .collapsed class is only applied to the buttons after they are clicked a second time, it is not automatically applied when the page first loads. This means can't rely on it for styling. Whatever button styles we use have to work for both open and collapsed, which means our heading are unchangeable and the border radii at the bottom are only fixed after the last panel is opened and closed (that, or you suffer with the border radii sticking around after the panel opens).

Do Eeet!

The bones couldn't be simpler:

[container:splr-acc]
[spoiler]Content one|Label One[/spoiler]
[spoiler]Content two|Label Two[/spoiler]
[spoiler]Content three|Label Three[/spoiler]
[/container]

And the styling is straightfoward (though we have to override some built-in styling on the theme).
NOTE: You MUST remove the space between the / and * in each comment below or your CSS won't work. We need to keep the space here so that it shows up in this article, but it isn't valid CSS.

/ * container to help with targeting */
.user-css div.splr-acc {
 line-height:1;
 width:70%;
}


/ * word on the buttons for each spoiler - these become the accordion headings */
.user-css div.splr-acc a.spoiler-button {
 display: block; 
 margin: 0;
 border-radius: 0px;
 border: 1px solid #3E9C92;
 background-color: #2F4F4C;
 border-bottom: none;
 font-weight: bold;
}


/ * The first heading... */
.user-css div.splr-acc a.spoiler-button:first-of-type {
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
}


/ * ...and the last one, when collapsed. */
.user-css div.splr-acc a.spoiler-button.collapsed:last-of-type {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}


/ * the panel content, hidden on page load */
.user-css div.splr-acc div.spoiler-content {
 margin: 0px;
 border-radius: 0px;
 border: 1px solid #3E9C92;
 border-top: none;
}


/ * fix the bottom corners of the last panel */
/ * WA strips the word c o n t a i n e r out of css, so need to use a class prefix instead */


.user-css div.splr-acc [class^=spoiler-conta]:last-child div.spoiler-content{
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}

Cover art by Photo by Yuvraj Singh on Unsplash