Turn Spoilers into Accordions with this One Weird Trick

Ugh, More Clickbait

But wait! Before you go...remember these?
Ruin the Movie For Me

Vader is Luke's FATHER.

What if you could make them look more like, say....

On Your Marks...

What do you want with Hattori Hanzo?
I need Japanese steel.
Why do you need Japanese steel?
I have vermin to kill.
You must have big rats if you need Hattori Hanzo's steel.
Huge.

Get Set...

He was an old man who fished alone in a skiff in the Gulf Stream and he had gone eighty-four days now without taking a fish. In the first forty days a boy had been with him. But after forty days without a fish the boy's parents had told him that the old man was now definitely and finally salao, which is the worst form of unlucky, and the boy had gone at their orders in another boat which caught three good fish the first week. It made the boy sad to see the old man come in each day with his skiff empty and he always went down to help him carry either the coiled lines or the gaff and harpoon and the sail that was furled around the mast. The sail was patched with flour sacks and, furled, it looked like the flag of permanent defeat.

ID	Name	Vehicle	Top Speed
1	James Bond	"The Beast" Aston Martin	180 mph
2	James T. Kirk	Enterprise starship	Warp 10 (plus a wee bit more)
3	Sam Gamgee	Donkey Bill	8 mph with a tailwind
4	Cpt. Brian Shul	Lockheed SR-71	Mach 3.5 (~2685 mph)

Aiieee! Lich King!

Do not come between the Nazgul and his prey. - You can't put an author because you're in a spoiler, so that pipe is already being used.

Now would you be interested? Turns out, it's not that hard. Just a little extra BBCode and some stylin' styles.

BBCode for this little gem

[h4|splr-acch]
[spoiler]Content one|Label One[/spoiler]
[spoiler]Content two|Label Two[/spoiler]
[spoiler]Content three|Label Three[/spoiler]
[/h4]

So, what's going on here? We're just using normal spoilers, like you read about in the Codex, except we're abusing the h4 header because we can put an ID on it.

What's an ID?

An ID is just a unique identifier, a name that calls out this particular h4 on this particular page. You really only want to have one element on each page with the same ID, though you can repeat IDs on different pages. Since the ID is really the secret sauce here, it's good for us that we can do this wherever we want and not have to add new styles. If we want more than one accordion style spoiler list on the same page, however, we'd need two different h4 IDs.
The ID on the h4 in our example is "splr-acch." It's a really good idea to use an ID that isn't likely to be used anywhere else. The reason is that common IDs might already be in use on the site, and then you'll get some unexpected results.
Now that you've built the content, you have to change some CSS styles. You can do that under your world settings > stylings > css. You can copy and paste this code in there (provided you've used the same ID as I have) and save it. Voila, the spoilers now look like an accordion control.

The Styles You Need to Look Good

I've put some comments in the code below. They start with a / * and end with a */. You must either delete these lines when you paste into your CSS, or remove the space between the / and the *. I have to include it so you can see the comments in this article.

/ * first, we need to reset the h5 heading so it doesn't affect the spoiler text */
/ * this is also where you decide how wide you want your spoiler accordion to be */
/ * use either a percentage or some absolute units like px or em */
.user-css h5#splr-acch {
 text-transform: none;
 color: inherit;
 font-family: inherit;
 font-size: inherit;
 margin: inherit;
 font-weight: normal;
 padding: inherit;
 border: none;
 border-radius: 0px;
 line-height: inherit;
 display: block;
 width: 70%;
}


/ * the spoiler button has some classes automatically applied. We need to change those */
.user-css h5#splr-acch a.spoiler-button {
 display: block; 
 margin: 0;
 border-radius: 0px;
 border: 1px solid #3E9C92;
 background-color: #2F4F4C;
 border-bottom: none;
 font-weight: bold;
}


/ * we'd like the top button to have rounded top corners */
.user-css h5#splr-acch a.spoiler-button:first-of-type {
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
}


/ * we'd like the last button to have rounded bottom corners...and it will, after it has 
 been opened and re-closed once. */
.user-css h5#splr-acch a.spoiler-button.collapsed:last-of-type {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}


/ * here's where we style the content of each spoiler */
.user-css h5#splr-acch div.spoiler-content {
 margin: 0px;
 border-radius: 0px;
 border: 1px solid #3E9C92;
 border-top: none;
}


/ * and of course, that last spoiler panel should have rounded corners when open */
.user-css h5#splr-acch [class^=spoiler-conta]:last-child div.spoiler-content {
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}

So, what's the catch?

Oh, you're goooood! Yes, there is always a catch. You see that the spoiler button is divided off from spoiler content by a pipe (a vertical line). There are some BBCode things you might want to do that use pipes. You can't put that particular BBCode in the panel content of the spoiler. You can put any other BBCode in there that you'd like.
See you in the commboxes!