details
summary
em CSS-only
| slide-in animation using
code margin-top
| (inefficient)
.content
p Box-shadow is used to highlight the collapsed area.
p Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!
p Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.
View Compiled
// Hiding logic
.content {
// Hiding overflow is necessary for the slide-in effect.
overflow: hidden; // Spoils position:sticky on descendant elements if there is any.
overflow: clip; // New to Firefox 81, Chrome 90.
> *:first-child {
transition: margin-top 500ms ease-out;
details:not([open]) + & {
margin-top: -20em;
}
}
}
// Styling
details {
background-color: wheat;
border: 2px solid darkgoldenrod;
border-radius: .2em;
}
.content {
display: flow-root; // Keep margin within borders
background-color: lightgoldenrodyellow;
box-shadow: inset 0 0 0 2px goldenrod; // Border
border-radius: .2em;
}
details {
width: fit-content;
margin: 0 auto;
}
summary {
padding: 0.2em 0.5em;
}
p {
margin: 0.6em;
}
summary em {
display: inline-block;
padding: .1em 1em;
margin-right: 0.5em;
background-color: goldenrod;
color: green;
border-radius: 1em;
}
body {
margin: 2em 4em;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.