Wiki-style Spoilers

Here's how I made my wiki-style spoilers, or as I call them, Title Spoilers. Long story short, it's a standard spoiler with a header tag and an icon in the spoiler title, styled with CSS!

Example

Woo, look at me, I'm the spoiler content!

---

Firstly, the BBCode is very simple. As I mentioned above, it's just the normal spoiler BBCode.
I also wrap them in a container to only style the selected spoilers. You could also style all the spoilers on the page based on an article tag, so you don't have to wrap your entire page, or each spoiler, with this container.
BBCode

[container:title-spoiler]
[spoiler]
content
|[h3]Spoiler Title [icon:fas fa-fw fa-chevron-down][/h3]
[/spoiler]
[/container]

Of course, you can use any icon, but I use a downwards-facing chevron. I add an icon to denote that this is a spoiler; otherwise, with the CSS styling we do, it just looks like a normal header. And with that CSS, we flip the icon when the spoiler is open!

Tip: Instead of adding an icon to the article with the section tags (like this: [section:fas fa-dragon] [/section]), you can simply do [icon:fas fa-dragon]! (You can also make this into a site variable)

Speaking of CSS, here it is.
(I use nesting CSS, by the way)
CSS

.user-css .title-spoiler {
  .spoiler-button,
  .spoiler-button:hover {
   display: block;
   background: none;
   margin: 0;
   padding: 0;
   text-align: left;
  }
  
  .spoiler-button[aria-expanded=true] .fa-chevron-down {transform: rotateX(180deg transition: all 0.2s ease-in-out;}
  .spoiler-button[aria-expanded=false] .fa-chevron-down {transform: rotateX(0deg transition: all 0.2s ease-in-out;}
}

We just remove the styling of the spoiler button, since we want it to look like normal text. Of course, you can do other styling stuff here too. When the spoiler is open, we flip the icon with a transform rotation, and flip it back when it's closed.

Tip: If you're getting a weird outline when you select the spoiler, you can remove it by adding this CSS:
Add .spoiler-button:focus to the spoiler button list.
Add box-shadow: none; to the CSS of the spoiler button.

Tip: If you want to make it work based on an article tag:
Tag your article with title-spoiler. (Or whatever tag you want)
Add .user-css .tag-title-spoiler before or after .user-css .title-spoiler. (Don't forget that comma!)

That is all! :)

Live Examples

I have some pages filled with these spoilers, in my Legends of the Dragonguard world.
Notebook: Short Ideas
Notebook: Ancient Dragonkin