Nested Collapsibles: Style

Link to article: Nested Collapsibles: Style.

@import url('https://scp-wiki.wdfiles.com/local--code/component%3Acolstyle/1');

(none)

```
code
```

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/component%3Acolstyle/1');
[[/module]]


> The Colmod was made by [[*user boyu12]] for the Japanese branch. A commented version of the theme and an overview over the variables can be found [http://scp-jp-sandbox3.wikidot.com/draft:boyu12-2/colmod_limit/1 here].
 
+++ Usage
[[include component:coltop-deep show=+ Show usage|hide=- Hide usage | ifprot=0 |nohide=0 | folded =1]]

[[div class="code"]]
@@[[include :scp-wiki:component:coltop show=+ SHOWTITLE 1|hide=- HIDETITLE 1]]@@
TEXT 1
@@[[include :scp-wiki:component:coltop show=+ SHOWTITLE 2|hide=- HIDETITLE 2]]@@
TEXT 2
@@[[include :scp-wiki:component:coltop show=+ SHOWTITLE 3|hide=- HIDETITLE 3]]@@
TEXT 3
@@[[include :scp-wiki:component:colend]]@@
@@[[include :scp-wiki:component:colend]]@@
@@[[include :scp-wiki:component:colend]]@@
[[/div]]
[[include component:coltop-deep show=+ SHOWTITLE 1|hide=- HIDETITLE 1 |ifprot=0 |nohide=0 | folded =1]]
TEXT 1
[[include component:coltop-deep show=+ SHOWTITLE 2|hide=- HIDETITLE 2 |ifprot=0 |nohide=0 | folded =1]]
TEXT 2
[[include component:coltop-deep show=+ SHOWTITLE 3|hide=- HIDETITLE 3 |ifprot=0 |nohide=0 | folded =1]]
TEXT 3
[[include component:colend-deep | nohide=0 |hide=- HIDETITLE 3]]
[[include component:colend-deep | nohide=0 |hide=- HIDETITLE 2]]
[[include component:colend-deep | nohide=0 |hide=- HIDETITLE 1]]

This can be extended as you wish. //Before the first time being saved, the module is not displayed correctly!//

[[include component:coltop-deep show=+ Show variables|hide=- Hide variables|ifprot=0 |nohide=0 | folded =1]]

Some variables can be used only on coltop or on both. They are used as follows:
{{@@[[[[include component:coltop VARIABLE1=VALUE1|VARIABLE2=VALUE2]]@@}}
They are always separated by a |. All variables are optional (show and hide also are variables, only working on coltop). In case variables are not set, the standard value is used.

{{**nohide**}} (coltop and colend)
* {{nohide=true}}: [Default colend] The show/hide text is hidden (in case both, coltop and colend, are set to nohide=false, it is impossible to hide the collapsible)
* {{nohide=false}}: [Default coltop] The show/hide text is shown
* Warning: In JP, both are set to false so colend must be set to false normaly. On INT both are set differently, so that they behave like normal collapsibles if no nohide is set!

{{**folded**}} (only coltop)
* {{folded=true}}: [Default] The collapsible is loaded hidden
* {{folded=false}}: The collapsible is loaded shown

{{**ifprot**}} (only coltop)
* {{ifprot=true}}: The collaspible is opened by a button, not a red text
* {{ifprot=false}}: [Default] Nothing

[[include component:coltop-deep show=+ Show example for ifprot=true|hide=- Hide example for ifprot=true|ifprot=true |nohide=0 | folded =1]]

TEXT
[[include component:colend-deep | nohide=0 |hide=- Hide example for ifprot=true]]
[[include component:colend-deep | nohide=0 |hide=- Hide variables]]
[[include component:colend-deep | nohide=0 |hide=- Hide usage]]


+ The actual Colmod theme

[[code type="css"]]
.colmod-block > ul,
.colmod-block > ul > li {
    display: block;
    line-height: normal;
    list-style: none;
    margin: 0;
    padding: 0;
}
.colmod-block > ul > li > ul,
li.folded > .colmod-link-top a + a,
li.folded > .colmod-content,
li.folded > .colmod-link-end a,
li.unfolded > .colmod-link-top a:first-child {
    display: none;
}
.colmod-content {
    -webkit-animation: colmod-fade-in 0.2s ease-in-out;
    -moz-animation: colmod-fade-in 0.2s ease-in-out;
    animation: colmod-fade-in 0.2s ease-in-out;
    -webkit-animation-timing-function: cubic-bezier(0.3649610494,0,0.6350389506,1);
    -moz-animation-timing-function: cubic-bezier(0.3649610494,0,0.6350389506,1);
    animation-timing-function: cubic-bezier(0.3649610494,0,0.6350389506,1);
}
li.folded > .colmod-content {
    -webkit-animation-name: none;
    -moz-animation-name: none;
    animation-name: none;
}
@-webkit-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes colmod-fade-in { from { opacity:0; } to { opacity:1; } }
[class|="colmod-link"] div.foldable-list-container {
    display: inline;
}
.colmod-collapsiblealt > [class|="colmod-link"],
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] {
    margin: 0.5em 0;
    text-align: center;
}
.colmod-collapsiblealt > [class|="colmod-link"] a,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a {
    padding: 0.1em 0.5em;
    text-decoration: none;
    background-color: #F4F4F4;
    border: 1px solid #AAA;
    color: #000;
}
.colmod-collapsiblealt > [class|="colmod-link"] a:hover,
.colmod-collapsiblealt > [class|="colmod-link"] a:active,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:hover,
.collapsiblealt > .colmod-block > ul > li > [class|="colmod-link"] a:active {
    background: #DDD;
    text-decoration: none;
}
[[/code]]

Nested Collapsibles: Style

Module Styles

Inline Styles

Includes

CSS Classes

Page Source