Nested Collapsibles: Style

NOTICE:

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 Boyu12 for the Japanese branch. A commented version of the theme and an overview over the variables can be found here.

Usage

• • _
  + Show usage- Hide usage

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

  • • _
    + SHOWTITLE 1- HIDETITLE 1

    TEXT 1

    • • _
      + SHOWTITLE 2- HIDETITLE 2

      TEXT 2

      • • _
        + SHOWTITLE 3- HIDETITLE 3

        TEXT 3

        - HIDETITLE 3
      - HIDETITLE 2
    - HIDETITLE 1

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

  • • _
    + Show variables- Hide variables

    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

    • • _
      + Show example for ifprot=true- Hide example for ifprot=true

      TEXT

      - Hide example for ifprot=true
    - Hide variables
  - Hide usage

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;
}