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!

 

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

Cover image: by Yuvraj Singh

Comments

Please Login in order to comment!
12 May, 2021 04:19

THANK YOU SO MUCH FOR THIS! I've been trying and trying to get this done myself and I just couldn't! All hail!

12 May, 2021 13:14

Thank you! It's still a work in progress. I hope to make it even better soon!

12 May, 2021 08:33

Amazing design, thank you!


Graylion
Roleplaying
Ruleplaying
Rollplaying
12 May, 2021 13:14

I loved your version as well, thank you!

12 May, 2021 08:59

I can definitely use this for making the spoilers look better for my Shadowrun stuff! Cheers!

Too low they build who build beneath the stars - Edward Young
12 May, 2021 13:14

Always happy to help advance Shadowrun! Thank you!

12 May, 2021 15:49

Tch, it seems to hate my theme because it doesn't seem to do anything. =/

Too low they build who build beneath the stars - Edward Young
12 May, 2021 17:25

Likely a CSS target issue, but DM me with a link and I'd be happy to look at it with you. There is also a non-guild version now, but that would not likely have to do with the styles.

9 Jul, 2021 00:51

Instead of this

.user-css div.splr-acc a.spoiler-button.collapsed:last-of-type {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}
which doesn't load initially, why not use the following?  
.user-css div.splr-acc a.spoiler-button:last-of-type {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
 
.user-css div.splr-acc a.spoiler-button[aria-expanded=true] {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

9 Jul, 2021 01:18

Oho! Rely on the bootstrap classes - that's brilliant! I'll work that back into the code when I get some time. THANKS!!!

19 Jul, 2021 21:30

No worries! Glad I could help!!!