Import

To use this CSSnippet and ensure you are always using the latest version, paste the following code into your site's CSS:

@import url('http://css.wikidot.com/cssnippet:collapsible-buttons/code_');

Description

Wikidot offers a handy [[collapsible]] syntax which allows you to create a collapsible block. That is, content is hidden until the viewer clicks a link.

This CSSnippet will allow you to turn that link into a Bootstrap button. To use this, you only need to wrap the collapsible in a div with classes collapsible-btn and collapsible-btn-*, where * is any of:

Default
Primary
Info
Success
Warning
Danger

Example:

[[div class="collapsible-btn collapsible-btn-default"]]
[[collapsible show="+ Show" hide="- Hide"]]
Some content
[[/collapsible]]
[[/div]]

Code

.collapsible-btn .collapsible-block-link{
    display: inline-block;
    line-height: 1.42857;
    margin-bottom: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 4px;
    font-size: 14px;
    padding: 6px 12px;
    color: #333;
    background-color: #FFF;
    border: 1px solid #CCC;
}
.collapsible-btn .collapsible-block-link:hover,
.collapsible-btn .collapsible-block-link:focus{
    text-decoration: none;
}
.collapsible-btn .collapsible-block-link:active{
    box-shadow: 0 3px 5px rgba(0,0,0,.125) inset;
    outline: 0 none;
}
 
.collapsible-btn.collapsible-btn-default .collapsible-block-link{
    background-color: #F5F5F5;
    border-color: #CCCCCC;
    color: #333;
}
.collapsible-btn.collapsible-btn-default .collapsible-block-link:hover,
.collapsible-btn.collapsible-btn-default .collapsible-block-link:focus{
    background-color: #E6E6E6;
    border-color: #ADADAD;
    color: #333;
}
 
.collapsible-btn.collapsible-btn-primary .collapsible-block-link{
    background-color: #428BCA;
    border-color: #3573BD;
    color: #FFF;
}
.collapsible-btn.collapsible-btn-primary .collapsible-block-link:hover,
.collapsible-btn.collapsible-btn-primary .collapsible-block-link:focus{
    background-color: #3071A9;
    border-color: #285E8E;
    color: #FFF;
}
 
.collapsible-btn.collapsible-btn-info .collapsible-block-link{
    background-color: #5BC0DE;
    border-color: #46B8DA;
    color: #FFF;
}
.collapsible-btn.collapsible-btn-info .collapsible-block-link:hover,
.collapsible-btn.collapsible-btn-info .collapsible-block-link:focus{
    background-color: #31b0d5;
    border-color: #269ABC;
    color: #FF;
}
 
.collapsible-btn.collapsible-btn-success .collapsible-block-link{
    background-color: #269ABC;
    border-color: #4CAE4C;
    color: #FFF;
}
.collapsible-btn.collapsible-btn-success .collapsible-block-link:hover,
.collapsible-btn.collapsible-btn-success .collapsible-block-link:focus{
    background-color: #449D44;
    border-color: #398439;
    color: #FFF;
}
 
.collapsible-btn.collapsible-btn-warning .collapsible-block-link{
    background-color: #F0AD4E;
    border-color: #EEA236;
    color: #FFF;
}
.collapsible-btn.collapsible-btn-warning .collapsible-block-link:hover,
.collapsible-btn.collapsible-btn-warning .collapsible-block-link:focus{
    background-color: #EC971F;
    border-color: #D58512;
    color: #FFF;
}
 
.collapsible-btn.collapsible-btn-danger .collapsible-block-link{
    background-color: #D9534F;
    border-color: #D43F3A;
    color: #FFF;
}
.collapsible-btn.collapsible-btn- .collapsible-block-link:hover,
.collapsible-btn.collapsible-btn- .collapsible-block-link:focus{
    background-color: #C9302C;
    border-color: #AC2925;
    color: #FFF;
}

In Practice

To see this in action, visit:

The CSS Zone

Making your Wikidot site look //great!//

Membership

CSS Guide

Import

Description

Code

In Practice