CSS Checkboxes
As seen on the Characters category page. And just to let you know, you'll need the Grandmaster level membership, as it uses container and section BBCode.
Preface
The way this works is that if nothing is selected, everything shows. Then, if something is selected, things of that group are shown, including if multiple things are selected. This also works when the page loads. (Spoilers are weird when the page first loads and you haven't used them yet, idk)Intermodal Containers
I'll start with the containers this time. On the Characters category page, I have a table of all the characters in my world, but the table is not necessary for this to work. However, some of the CSS uses the table to do stuff, but I'll change it for here. BBCode Structure[container:wrapper][container:test group-a]Something 1[/container][/container] [container:wrapper][container:test group-b]Something 2[/container][/container] [container:wrapper][container:test group-c]Something 3[/container][/container]That's all, honestly; it's just mainly settings CSS classes. It also depends on what you're doing / other CSS styling.
There are two containers here because you'll need the "wrapper" to select specific things. In my code, I don't have this as I select the table cells, which act as my "wrapper". For my characters page, I have a container for the background image, several specific CSS classes for the second level container, then the character's name is wrapped in a [p] tag for styling. My Character Example
[td] [url:https://www.worldanvil.com/w/dragonguard/a/azier][container:img-char][container:char aff-drgngrd ph-female-1][p]Azier[/p][/container][/container][/url] [/td](Of course wrapped in the [table] tags)
Legend / Checkboxes
Here's the BBCode for the legend / checkboxes themselves, based on my characters category page.I chose to do three just so you can see it works with multiple groups.
[container:checkbox group-a][spoiler]|[section:unchecked][][/section][section:checked][c][/section][/spoiler][section:group-style-a]Group A[/section][/container] [container:checkbox group-b][spoiler]|[section:unchecked][][/section][section:checked][c][/section][/spoiler][section:group-style-b]Group B[/section][/container] [container:checkbox group-c][spoiler]|[section:unchecked][][/section][section:checked][c][/section][/spoiler][section:group-style-c]Group C[/section][/container]It's a bit confusing, but I'll break it down. I had a legend container wrapping all the checkboxes for styling; I didn't include it here.
The Good Stuff (CSS)
Now for the part that makes it work..user-css .wrapper { display: none; }First, you hide all containers with the wrapper class.
For me, these are the table's cells. (.table td) Then, do whatever styling stuff you want.
Legend / Checkbox CSS
.user-css .checkbox { margin: 0; } .user-css .checkbox .spoiler-button { background: none; } .user-css .checkbox .spoiler-card { display: none; }We want to remove any instance of actual spoiler stuff. We're just using the spoiler as a button for an on / off state, more or less, since we can't use JavaScript. (Lol it even removed that word in plain text, so I had to PascalCase it.) Switching the checkboxes
.user-css .checkbox .spoiler-button .checked,
.user-css .checkbox .spoiler-button[aria-expanded=true] .unchecked,
.user-css .checkbox .spoiler-button[aria-expanded=false] .checked {
display: none;
}
.user-css .checkbox .spoiler-button[aria-expanded=false] .unchecked,
.user-css .checkbox .spoiler-button[aria-expanded=true] .checked {
display: block;
}
Here's where we switch the checkboxes based on the spoiler's state. We first hide the checked box in general because, for some reason, when loading the page, the spoiler element is like... wierd and doesn't register that it's actually closed. idk man..
We also tell it to hide the unchecked box if the spoiler's expanded state is true and also tell it to hide the checked box if the expanded state is false.Then, in the second block, it's just the opposite. Display unchecked if the spoiler state is not expanded, and show checked if it is.
.user-css .checkbox .group-style { padding-inline: 5px; }Then we do some styling with the legend / checkbox group. In mine, I added a left border that is colored and corresponds to the same colored border by the character's name.
Toggling Visibility
Note: Make sure this is below the very first thing of hiding all the containers with "wrapper"! Now for what you came here for. The meat and potatoes of CSS code. (?)Making it work. Brace yourself, it's a bit crazy, and it took me like a week to figure it out. You can always go to my Characters page and hit F12 to view the CSS code too!
.user-css:has(.checkbox.group-a .spoiler-button[aria-expanded=true]) .wrapper:has(:not(.test.group-a)),
.user-css:has(.checkbox.group-b .spoiler-button[aria-expanded=true]) .wrapper:has(:not(.test.group-b)),
.user-css:has(.checkbox.group-c .spoiler-button[aria-expanded=true]) .wrapper:has(:not(.test.group-c)) {
display: none;
}
.user-css:has(.checkbox .spoiler-button:not([aria-expanded])) .wrapper:has(.test),
.user-css:has(.checkbox.group-a .spoiler-button[aria-expanded=true]) .wrapper:has(.test.group-a),
.user-css:has(.checkbox.group-b .spoiler-button[aria-expanded=true]) .wrapper:has(.test.group-b),
.user-css:has(.checkbox.group-c .spoiler-button[aria-expanded=true]) .wrapper:has(.test.group-c),
.user-css:has(.checkbox .spoiler-button[aria-expanded=false]) .wrapper:has(.test) {
display: block;
}
This is why you need that wrapper container! (Or in my case, table cells)We extensively use the CSS :has and :not selectors.
Note: If you're using a table, you can just use the table cells. Replace all the .wrapper with .table td!
First blockIf I recall correctly, I had to have the group selections in the second code block to be specifically between those first and last lines. Y'know, cascading styling stuff. (Disclaimer: Not actually what CSS means. lol)
Remember, you can always check out the Characters category page and hit F12! This tutorial was based on that page. That one uses tables and stuff, so the CSS is slightly different. You can also hit F12 on this page too, as I provided a live example below that doesn't use tables.
Comments