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

Usage

What this is

This page contains the source code for the top half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

Usage

How to create a nested collapsible:

[[include :scp-wiki:component:coltop
| show=+ show block
| hide=- hide block
]]
Text to show inside the collapsible
[[include :scp-wiki:component:colend]]

Don't remove any of the pipe symbols! (|)

show
Default: "+ show block"
The text of the button that opens the collapsible.
hide
Default: "- hide block"
The text of the button that closes the collapsible.
nohide
Default: 0
If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
folded
Default: 1
If 0, the collapsible will start opened. If 1, it will start closed.

You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


    • _

    [[include component:coltop show=+ SHOWTITLE 1|hide=- HIDETITLE 1]]
    TEXT 1
    [[include component:coltop show=+ SHOWTITLE 2|hide=- HIDETITLE 2]]
    TEXT 2
    [[include component:coltop show=+ SHOWTITLE 3|hide=- HIDETITLE 3]]
    TEXT 3
    [[include component:colend]]
    [[include component:colend]]
    [[include component:colend]]

    What this is

    This page contains the source code for the top half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

    Usage

    How to create a nested collapsible:

    [[include :scp-wiki:component:coltop
    | show=+ show block
    | hide=- hide block
    ]]
    Text to show inside the collapsible
    [[include :scp-wiki:component:colend]]

    Don't remove any of the pipe symbols! (|)

    show
    Default: "+ show block"
    The text of the button that opens the collapsible.
    hide
    Default: "- hide block"
    The text of the button that closes the collapsible.
    nohide
    Default: 0
    If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
    folded
    Default: 1
    If 0, the collapsible will start opened. If 1, it will start closed.

    You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


      • _

      TEXT 1

      What this is

      This page contains the source code for the top half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

      Usage

      How to create a nested collapsible:

      [[include :scp-wiki:component:coltop
      | show=+ show block
      | hide=- hide block
      ]]
      Text to show inside the collapsible
      [[include :scp-wiki:component:colend]]

      Don't remove any of the pipe symbols! (|)

      show
      Default: "+ show block"
      The text of the button that opens the collapsible.
      hide
      Default: "- hide block"
      The text of the button that closes the collapsible.
      nohide
      Default: 0
      If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
      folded
      Default: 1
      If 0, the collapsible will start opened. If 1, it will start closed.

      You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


        • _

        TEXT 2

        What this is

        This page contains the source code for the top half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

        Usage

        How to create a nested collapsible:

        [[include :scp-wiki:component:coltop
        | show=+ show block
        | hide=- hide block
        ]]
        Text to show inside the collapsible
        [[include :scp-wiki:component:colend]]

        Don't remove any of the pipe symbols! (|)

        show
        Default: "+ show block"
        The text of the button that opens the collapsible.
        hide
        Default: "- hide block"
        The text of the button that closes the collapsible.
        nohide
        Default: 0
        If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
        folded
        Default: 1
        If 0, the collapsible will start opened. If 1, it will start closed.

        You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


          • _

          TEXT 3

          What this is

          This page contains the source code for the bottom half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

          Usage

          How to create a nested collapsible:

          [[include :scp-wiki:component:coltop
          | show=+ show block
          | hide=- hide block
          ]]
          Text to show inside the collapsible
          [[include :scp-wiki:component:colend]]

          Don't remove any of the pipe symbols! (|)

          show
          Default: "+ show block"
          The text of the button that opens the collapsible.
          hide
          Default: "- hide block"
          The text of the button that closes the collapsible.
          nohide
          Default: 0
          If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
          folded
          Default: 1
          If 0, the collapsible will start opened. If 1, it will start closed.

          You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


        What this is

        This page contains the source code for the bottom half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

        Usage

        How to create a nested collapsible:

        [[include :scp-wiki:component:coltop
        | show=+ show block
        | hide=- hide block
        ]]
        Text to show inside the collapsible
        [[include :scp-wiki:component:colend]]

        Don't remove any of the pipe symbols! (|)

        show
        Default: "+ show block"
        The text of the button that opens the collapsible.
        hide
        Default: "- hide block"
        The text of the button that closes the collapsible.
        nohide
        Default: 0
        If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
        folded
        Default: 1
        If 0, the collapsible will start opened. If 1, it will start closed.

        You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


      What this is

      This page contains the source code for the bottom half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

      Usage

      How to create a nested collapsible:

      [[include :scp-wiki:component:coltop
      | show=+ show block
      | hide=- hide block
      ]]
      Text to show inside the collapsible
      [[include :scp-wiki:component:colend]]

      Don't remove any of the pipe symbols! (|)

      show
      Default: "+ show block"
      The text of the button that opens the collapsible.
      hide
      Default: "- hide block"
      The text of the button that closes the collapsible.
      nohide
      Default: 0
      If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
      folded
      Default: 1
      If 0, the collapsible will start opened. If 1, it will start closed.

      You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


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

    What this is

    This page contains the source code for the top half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

    Usage

    How to create a nested collapsible:

    [[include :scp-wiki:component:coltop
    | show=+ show block
    | hide=- hide block
    ]]
    Text to show inside the collapsible
    [[include :scp-wiki:component:colend]]

    Don't remove any of the pipe symbols! (|)

    show
    Default: "+ show block"
    The text of the button that opens the collapsible.
    hide
    Default: "- hide block"
    The text of the button that closes the collapsible.
    nohide
    Default: 0
    If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
    folded
    Default: 1
    If 0, the collapsible will start opened. If 1, it will start closed.

    You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


      • _

      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 nihide 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

      What this is

      This page contains the source code for the top half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

      Usage

      How to create a nested collapsible:

      [[include :scp-wiki:component:coltop
      | show=+ show block
      | hide=- hide block
      ]]
      Text to show inside the collapsible
      [[include :scp-wiki:component:colend]]

      Don't remove any of the pipe symbols! (|)

      show
      Default: "+ show block"
      The text of the button that opens the collapsible.
      hide
      Default: "- hide block"
      The text of the button that closes the collapsible.
      nohide
      Default: 0
      If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
      folded
      Default: 1
      If 0, the collapsible will start opened. If 1, it will start closed.

      You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


        • _

        TEXT

        What this is

        This page contains the source code for the bottom half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

        Usage

        How to create a nested collapsible:

        [[include :scp-wiki:component:coltop
        | show=+ show block
        | hide=- hide block
        ]]
        Text to show inside the collapsible
        [[include :scp-wiki:component:colend]]

        Don't remove any of the pipe symbols! (|)

        show
        Default: "+ show block"
        The text of the button that opens the collapsible.
        hide
        Default: "- hide block"
        The text of the button that closes the collapsible.
        nohide
        Default: 0
        If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
        folded
        Default: 1
        If 0, the collapsible will start opened. If 1, it will start closed.

        You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


      What this is

      This page contains the source code for the bottom half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

      Usage

      How to create a nested collapsible:

      [[include :scp-wiki:component:coltop
      | show=+ show block
      | hide=- hide block
      ]]
      Text to show inside the collapsible
      [[include :scp-wiki:component:colend]]

      Don't remove any of the pipe symbols! (|)

      show
      Default: "+ show block"
      The text of the button that opens the collapsible.
      hide
      Default: "- hide block"
      The text of the button that closes the collapsible.
      nohide
      Default: 0
      If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
      folded
      Default: 1
      If 0, the collapsible will start opened. If 1, it will start closed.

      You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


    What this is

    This page contains the source code for the bottom half of the Nested Collapsible component, created by Boyu12Boyu12 for the Japanese branch.

    Usage

    How to create a nested collapsible:

    [[include :scp-wiki:component:coltop
    | show=+ show block
    | hide=- hide block
    ]]
    Text to show inside the collapsible
    [[include :scp-wiki:component:colend]]

    Don't remove any of the pipe symbols! (|)

    show
    Default: "+ show block"
    The text of the button that opens the collapsible.
    hide
    Default: "- hide block"
    The text of the button that closes the collapsible.
    nohide
    Default: 0
    If 0, the "hide" text will be shown when the collapsible is open. If 1, it will not be.
    folded
    Default: 1
    If 0, the collapsible will start opened. If 1, it will start closed.

    You can nest as many Nested Collapsibles inside each other as you like. You can even put Nested Collapsibles inside regular collapsibles, and vice versa. However, you cannot nest regular collapsibles inside other regular collapsibles.


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