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!
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
Amazing design, thank you!
I loved your version as well, thank you!