/*
Please wrap your collapsible content in a single element or so help me Must add a transition or it breaks because that's the whole purpose of this Only one transition-duration works (see explanation on line #141 in JS) You can add more to an inner wrapper (.details-styling)
- /
.collapse-init summary + * {
transition: all 0.25s ease-in-out; overflow: hidden;
}
/*
Closed state. Any CSS transitions work here The JS has a height calculation to make sliding opened/closed easier, but it's not necessary Remove the height prop for a simple toggle on/off (after all that work I did for you?)
- /
.collapse-init :not(.panel-active) summary + * {
height: 0; opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: bottom center; transform-origin: bottom center;
}
.collapse-init summary {
list-style: none;
} .collapse-init summary::-webkit-details-marker {
display: none;
} .collapse-init summary::before {
display: none;
} .collapse-init summary {
cursor: pointer;
}
/*
This element exists so .details-wrapper has no extra margin/padding that can screw with the smooth height collapse You can style .details-wrapper decoratively but avoid anything that modifies the box and add it to .details-styling instead Otherwise, this element is totally optional. Remove if you hate divitis
- /
.details-styling {
padding: 1em;
}
- -moz-selection {
background: #fbcb6a; color: #4d4433;
}
- selection {
background: #fbcb6a; color: #4d4433;
}
[type=checkbox] {
opacity: 0; position: absolute; width: 0; height: 0;
} [type=checkbox] + label {
background: #ffe9ec; border-left: 4px solid #b63b4d; cursor: pointer; display: block; font-size: 1rem; font-weight: 700; text-align: left; transition: 0.1s; padding: 0.75em 1em;
} [type=checkbox] + label::before {
border: 2px solid; border-radius: 2px; color: #b63b4d; content: ; display: inline-block; margin-right: 0.75ch; transition: 0.1s; width: 1ch; height: 1ch; vertical-align: baseline;
} [type=checkbox]:focus + label {
outline: 2px solid #b63b4d;
} [type=checkbox]:checked + label::before {
background: currentColor; box-shadow: inset 0 0 0 2px #fff;
}
.container {
box-shadow: 0.2em 1em 2em -1em #d6d1e0; margin: 2.4em 0;
}
details {
background: #fff; border: 1px solid #d6d1e0; border-bottom: 0; list-style: none;
} details:first-child {
border-radius: 6px 6px 0 0;
} details:last-child {
border-bottom: 1px solid #d6d1e0; border-radius: 0 0 6px 6px;
}
summary {
display: block; font-size:35px; transition: 0.2s; font-weight: 700; padding: 1em;
} summary:focus {
outline: 2px solid #b63b4d;
} .collapse-init summary::after {
border-right: 2px solid; border-bottom: 2px solid; content: ; float: right; width: 0.5em; height: auto; margin-top: 0.25em; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: inherit;
} [open] summary {
background: #b63b4d; color: #f8f5fe;
} [open] summary::after {
margin-top: 0.5em; -webkit-transform: rotate(225deg); transform: rotate(225deg);
}