Exploiting Foldable List Containers

Link to article: Exploiting Foldable List Containers.


.code {
    margin: 1em 0;
}

/* Generic content box */
.content-box {
    margin: 1em 0;
    border: solid 2px #000;
    padding: 13px 15px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Classified box */
.classified-box {
    background: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png") center no-repeat;
    float: center;
}

/* FLC stuff */
.flc-cleaner > ul,
.flc-cleaner > ul > li {
    display: block;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flc-cleaner .foldable-list-container {
    display: inline-block;
}
.classified-hider li.folded > .classified-hider-closed {
    display: none;
}
.classified-hider li.unfolded > .classified-hider-open {
    display: none;
}
.document-swapper li.folded > .foldable-list-container > a:nth-child(1) {
    display: none;
}
.document-swapper li.unfolded > .foldable-list-container > a:nth-child(2) {
    display: none;
}
.document-swapper li.folded > .document-swapper-original {
    display: none;
}
.document-swapper li.unfolded > .document-swapper-transcribed {
    display: none;
}

/* Utilization tutorial stuff */
li.folded > .colorme { color: blue; }
li.unfolded > .colorme { color: orange; }
.colorme-wrapper li.folded > .colorme2 { color: blue; }
.colorme-wrapper li.unfolded > .colorme2 { color: orange; }

.flc-cleaner > ul,
.flc-cleaner > ul > li {
    display: block;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flc-cleaner .foldable-list-container {
    display: inline-block;
}

li.folded > .colorme { color: blue; }
li.unfolded > .colorme { color: orange; }

.colorme-wrapper li.folded > .colorme { color: blue; }
.colorme-wrapper li.unfolded > .colorme { color: orange; }

```
font-size: 80%;
```
```
display: none;
```
```
margin-top: 1em;
```
```
margin: 1em 0;
```

```
foldable-list-container
```
```
foldable-list-container
```
```
foldable-list-container
```
```
folded
```
```
foldable-list-container
```
```
unfolded
```
```
blockquote
```
```
flc-cleaner
```
```
document-swapper
```
```
unfolded
```
```
foldable-list-container
```
```
document-swapper-original
```
```
document-swapper-transcribed
```
```
blockquote
```
```
blockquote
```
```
flc-cleaner
```
```
classified-hider
```
```
unfolded
```
```
classified-hider-closed
```
```
content-box
```
```
classified-box
```
```
foldable-list-container
```
```
classified-hider-open
```
```
blockquote
```
```
foldable-list-container
```
```
folded
```
```
foldable-list-container
```
```
folded
```
```
folded
```
```
foldable-list-container
```
```
folded
```
```
foldable-list-container
```
```
flc-cleaner
```
```
folded
```
```
foldable-list-container
```
```
flc-cleaner
```
```
folded
```
```
foldable-list-container
```
```
flc-cleaner
```
```
folded
```
```
foldable-list-container
```
```
colorme
```
```
flc-cleaner
```
```
folded
```
```
foldable-list-container
```
```
colorme
```
```
flc-cleaner
```
```
colorme-wrapper
```
```
folded
```
```
foldable-list-container
```
```
colorme
```
```
flc-cleaner
```
```
folded
```
```
foldable-list-container
```
```
colorme
```
```
flc-cleaner
```
```
colorme-wrapper
```
```
folded
```
```
foldable-list-container
```
```
colorme2
```
```
flc-cleaner
```
```
folded
```
```
foldable-list-container
```
```
colorme2
```

[[module CSS]]

.code {
    margin: 1em 0;
}

/* Generic content box */
.content-box {
    margin: 1em 0;
    border: solid 2px #000;
    padding: 13px 15px 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Classified box */
.classified-box {
    background: url("https://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png") center no-repeat;
    float: center;
}

/* FLC stuff */
.flc-cleaner > ul,
.flc-cleaner > ul > li {
    display: block;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flc-cleaner .foldable-list-container {
    display: inline-block;
}
.classified-hider li.folded > .classified-hider-closed {
    display: none;
}
.classified-hider li.unfolded > .classified-hider-open {
    display: none;
}
.document-swapper li.folded > .foldable-list-container > a:nth-child(1) {
    display: none;
}
.document-swapper li.unfolded > .foldable-list-container > a:nth-child(2) {
    display: none;
}
.document-swapper li.folded > .document-swapper-original {
    display: none;
}
.document-swapper li.unfolded > .document-swapper-transcribed {
    display: none;
}

/* Utilization tutorial stuff */
li.folded > .colorme { color: blue; }
li.unfolded > .colorme { color: orange; }
.colorme-wrapper li.folded > .colorme2 { color: blue; }
.colorme-wrapper li.unfolded > .colorme2 { color: orange; }

[[/module]]

[[>]]
[[include :scp-wiki:info:start]]
[[=]]
**Exploiting Foldable List Containers**

Written by [[*user MirageTD]]
**[[span style="font-size: 80%;"]][[[miragetd | MORE BY THIS AUTHOR]]][[/span]]**
[[/=]]
[[include :scp-wiki:info:end]]
[[/>]]

This guide assumes a good understanding of wikidot code, HTML and CSS. If you're new to these, you may want to go over [[[advanced-formatting-and-you | Advanced Formatting and You]]] and the [[[http://scp-int.wikidot.com/manuel-de-formatage-avance | Advanced Formatting Manual]]] first.

-----

++ Contents
* [#toc1 What is this?]
* [#toc2 Why is this useful?]
* [#toc5 How do I use this?]
 * [#toc6 Preparation]
 * [#toc7 Utilization]
* [#toc8 Conclusion]

-----

+ What is this?

The intended use for foldable list containers, which will be refereed to as FLCs throughout this guide, is demoed in Section 2 of [[[advanced-formatting-and-you | Advanced Formatting and You]]]. They're also what make [[*user Boyu12]]'s [[[component:coltop | Nested Collapsibles]]] work.

Normally, FLCs are just alternative collapsibles. If you strip away the collapsible functionality, though, all they do is toggle the class of an element at the press of a button. To see this, let's look at what's going on behind the scenes with the most basic FLC usage possible.

[[code]]
[[div class="foldable-list-container"]]
* outer bullet
 * inner bullet
[[/div]]
[[/code]]

[[div class="foldable-list-container"]]
* outer bullet
 * inner bullet
[[/div]]

If we inspect the source of this element while it's collapsed, it looks like this:

[[code type="html"]]
<div class="foldable-list-container">
  <ul>
    <li class="folded">
      <a href="javascript:;">outer bullet</a>
      <ul style="display: none;">
        <li>inner bullet</li>
      </ul>
    </li>
  </ul>
</div>
[[/code]]

And while expanded, it looks like this:

[[code type="html"]]
<div class="foldable-list-container">
  <ul>
    <li class="unfolded">
      <a href="javascript:;">outer bullet</a>
      <ul style="">
        <li>inner bullet</li>
      </ul>
    </li>
  </ul>
</div>
[[/code]]

The class of the first list item element changes between "folded" and "unfolded" whenever we press the outer bullet.

+ Why is this useful?

Giving the reader the ability to toggle an element between two different states has some fun use-cases. Let's say you've got a cool handwritten journal entry from the victim of some monster that you want to add to your article, but you want to make it more accessible by giving the reader the option to view a transcribed version instead.

[[div class="blockquote"]]

[[div_ class="flc-cleaner document-swapper"]]
[[ul]][[li class="unfolded"]]

[[div_ class="foldable-list-container" style="margin-top: 1em;"]]
[# Show Transcribed Document][# Show Original Document]
[[/div]]

[[div class="document-swapper-original"]]
[[image bright.jpg style="margin: 1em 0;"]]
[[/div]]

[[div class="document-swapper-transcribed"]]
[[div class="blockquote"]]
There once was a lady named Bright
Who traveled much faster than light
She departed one day
In a relative way
And arrived on the previous night
[[/div]]
[[/div]]

[[/li]][[/ul]][[/div]]

[[/div]]

Or maybe you want to replace a button with content after the reader "submits credentials" to view it, instead of sending them to a different page.

[[div class="blockquote"]]

[[div_ class="flc-cleaner classified-hider"]]
[[ul]][[li class="unfolded"]]
[[div class="classified-hider-closed"]]

**Addendum XXXX.X:** [REDACTED]

[[=]]
[[div class="content-box classified-box"]]
++ THE FOLLOWING FILE IS LEVEL X/XXXX CLASSIFIED
----
[[div_ class="foldable-list-container"]]
+++ [# SUBMIT CREDENTIALS TO VIEW]
[[/div]]
[[/div]]
[[/=]]

[[/div]]
[[div class="classified-hider-open"]]

**Addendum XXXX.X:** Super Secret Log

[[div class="blockquote"]]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Vulputate dignissim suspendisse in est ante in nibh. Mattis rhoncus urna neque viverra. Vulputate mi sit amet mauris commodo quis imperdiet massa. Nulla facilisi morbi tempus iaculis urna id volutpat. Non odio euismod lacinia at quis risus sed vulputate. Sem integer vitae justo eget magna fermentum iaculis.
[[/div]]

[[/div]][[/li]][[/ul]][[/div]]

[[/div]]

FLCs have you covered! These are just a couple basic examples, there are loads of applications. If you're really good with CSS, you could even add some cool animations!

+ How do I use this?

++ Preparation

We'll begin by duplicating the source for that basic FLC example in native wikidot code.

[[code]]
[[div_ class="foldable-list-container"]]
  [[ul]]
    [[li class="folded"]]
      [# outer bullet]
      [[ul]]
        [[li]]inner bullet[[/li]]
      [[/ul]]
    [[/li]]
  [[/ul]]
[[/div]]
[[/code]]

[[div_ class="foldable-list-container"]]
  [[ul]]
    [[li class="folded"]]
      [# outer bullet]
      [[ul]]
        [[li]]inner bullet[[/li]]
      [[/ul]]
    [[/li]]
  [[/ul]]
[[/div]]

Interestingly, the div with the foldable-list-container class doesn't need to be at the top of the hierarchy. As long as it contains the link element, the class of the list item element will still toggle between folded and unfolded without a problem. This does break the way the inner bullet is displayed though, so let's get rid of it.

[[code]]
[[ul]]
  [[li class="folded"]]
    [[div_ class="foldable-list-container"]]
      [# outer bullet]
    [[/div]]
  [[/li]]
[[/ul]]
[[/code]]

[[ul]][[li class="folded"]]
[[div_ class="foldable-list-container"]]
[# outer bullet][[/div]][[/li]][[/ul]]

[[div]]
It may not look like it's doing anything, but every time you press it the class //is// being toggled. If you want to make sure it's working, you can inspect the page source.
[[/div]]

Finally, you'll probably want to remove the list formatting and do some other minor touch-ups. This can be accomplished by styling a div wrapper.

[[code]]
[[module CSS]]
.flc-cleaner > ul,
.flc-cleaner > ul > li {
    display: block;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}
.flc-cleaner .foldable-list-container {
    display: inline-block;
}
[[/module]]

[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[/li]][[/ul]][[/div]]
[[/code]]

[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[/li]][[/ul]][[/div]]

It's worth noting that this styling also guts //all// lists within the flc-cleaner div, but this is a good template for most use-cases.

++ Utilization

Making use of the toggling class is all about [[[https://www.w3schools.com/cssref/css_selectors.asp | selectors]]]. By selecting element X under the folded class and applying a style to it, then selecting the same element under the unfolded class and applying a //different// style to it, the style of element X is toggled //with// the class of the list item element.

[[code]]
[[module CSS]]
li.folded > .colorme { color: blue; }
li.unfolded > .colorme { color: orange; }
[[/module]]

[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[div class="colorme"]]
**Check out these cool colors!**
[[/div]]

[[/li]][[/ul]][[/div]]
[[/code]]

[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[div class="colorme"]]
**Check out these cool colors!**
[[/div]]

[[/li]][[/ul]][[/div]]

If you're going to use more than one FLC in your article, you should also limit the scope of the styling to a wrapper class.

[[code]]
[[module CSS]]
.colorme-wrapper li.folded > .colorme { color: blue; }
.colorme-wrapper li.unfolded > .colorme { color: orange; }
[[/module]]

[[div_ class="flc-cleaner colorme-wrapper"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[div class="colorme"]]
**Check out these cool colors!**
[[/div]]

[[/li]][[/ul]][[/div]]

[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[div class="colorme"]]
No colors for me :(
[[/div]]

[[/li]][[/ul]][[/div]]
[[/code]]

[[div_ class="flc-cleaner colorme-wrapper"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[div class="colorme2"]]
**Check out these cool colors!**
[[/div]]

[[/li]][[/ul]][[/div]]

[[div_ class="flc-cleaner"]]
[[ul]][[li class="folded"]]

[[div_ class="foldable-list-container"]]
[# Toggle]
[[/div]]

[[div class="colorme2"]]
No colors for me :(
[[/div]]

[[/li]][[/ul]][[/div]]

The document swapper and classified block examples from earlier use this same technique, conditionally changing the visibility of elements rather than their color. There's also nothing keeping you from messing with the style of the element holding the button, or the button itself!

+ Conclusion

That's all there is to it! Pretty much everything else is a matter of CSS, so have fun styling!

[[include :scp-wiki:component:license-box]]
=====
=====
> **Filename:** bright.jpg
> **Author:** [[*user MirageTD]]
> **License:** [[[https://creativecommons.org/licenses/by-sa/3.0/ | CC BY-SA 3.0]]]
> **Source Link:** https://scp-wiki.wikidot.com/exploiting-foldable-list-containers
=====
[[include :scp-wiki:component:license-box-end]]

Exploiting Foldable List Containers

Module Styles

Inline Styles

Includes

CSS Classes

Page Source