/* From Fiddle at https://jsfiddle.net/c1ypx24c/12/ */

.tb {
    margin:10px 0;
    position:relative;
    width: 100%;
}

body.colorscheme-dark .tb{
    background-color: gray;
}
body.colorscheme-light .tb{
    background-color: #b8e4ff
}

input[type="checkbox"] {
    width:70%;
    height:26px;
    position:absolute;
    overflow: hidden;
    opacity:0;
    z-index:10;
    cursor:pointer;
}

.tb span {
    position:relative;
    height:23px;
    line-height:23px;
    display:inline-block;
    
    transition:all .3s ease;
    padding:0 10px;
    width:100%;
}
body.colorscheme-dark .tb {
    background: #1A1A1A;
    padding: 10px;
}
.tb span+span, .collapsible {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span {
    display:none;
}
.tb input[type="checkbox"]:checked ~ span+span{
    display:inline-block;
}
.tb input[type="checkbox"]:checked ~ .collapsible {
    display:table;
}
body.colorscheme-light .collapsible {
    background-color: white;
}