Nested Collapsibles: Style


This is a component page used internally by the SCP Wiki. It is intended to be used and included on other pages.

The Colmod was made by Boyu12Boyu12 for the Japanese branch. A commented version of the theme and an overview over the variables can be found here.


    • _

    [[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]]

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

      • _

      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

The actual Colmod theme

.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;
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License