Fancy Accordions with Heading Categories

Who doesn't love accordions? They're super fun and incredibly space-saving, as they collapse into nice & neat little headers.

Those who've been around WA for a while know that one of the easiest ways to generate an accordion is by using a combination of containers and spoilers. Unfortunately for you free users out there, that means this is a Grandmaster+ feature. To get access, you'll have to join the Worldbuilder's Guild.

To preface, this is based largely on User51's accordion spoilers, which you can find here. It includes my edits (which you can find in the comments on that page) but also a few of my own simple tweaks, and what you'll end up with is this:

Big Header

Content one

Little Header One

Content two

Little Header Two

Content three

You are probably already seeing some of the advantages to this!

The Code

The bbcode is identical to User51's (I changed the content and the div class, but its fundamentally the same), so all of the magic happens in CSS. Here's the bbcode:

[container:splr-acc-jus]
[spoiler]Content one|Big Header[/spoiler]
[spoiler]Content two|Little Header One[/spoiler]
[spoiler]Content three|Little Header Two[/spoiler]
[/container]

Now for the CSS – first off, I have just the basic styling of the accordion.

.user-css div.splr-acc-jus {
  line-height: 1.4em;
  width: 100%;
}


.user-css div.splr-acc-jus a.spoiler-button {
  display: block;
  margin: 0;
  border-radius: 0px;
  border: none;
  text-shadow: 0 0 5px var(--MartianJuice
  font-family: Aldrich;
  letter-spacing: .01em;
  font-weight: 100;
  padding-top: 5px;
  padding-bottom: 5px;
  background-color: rgba(50, 163, 139, 0.637) !important;
  white-space: normal;
  text-align: justify !important;
}


.user-css div.splr-acc-jus div.spoiler-content {
  margin: 0px;
  border-radius: 0px;
  border: none;
  background: rgba(34, 68, 43, 0.637
  box-shadow: none;
  color: var(--MartianJuice
  text-align: justify;
}

Then, I have the CSS that makes that first heading pop. It also rounds the top corners of the box.

.user-css div.splr-acc-jus a.spoiler-button:first-of-type {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  font-family: Aldrich;
  font-size: 40px;
  font-variant: small-caps;
  background-color: rgba(85, 136, 99, 0.637) !important;
  text-align: center !important;
}

Finally, what I've done is rely on bootstrap classes to round the bottom corners of the spoiler box. This keeps everything nice and rounded within the bounds of the box and also turns off the rounding on the headers when the accordion is opened.

.user-css div.splr-acc-jus a.spoiler-button:last-of-type {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}


.user-css div.splr-acc-jus a.spoiler-button[aria-expanded=true] {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}


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

Of course, if you just want the rounded bottom but don't want the top header to be so different, you can just delete the appropriate CSS.

Now, have fun and go make something!