An alternative would be to simply avoid <details>
altogether and instead rely on some checkbox trickery:
.toggle {
appearance: none;
display: none;
}
.toggle+label:before {
content: "⯈";
display: inline-block;
line-height: 0;
transition: transform .5s;
}
.toggle:checked+label:before {
transform: rotate(90deg);
}
.toggle~.details {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height .5s, opacity .5s;
}
.toggle:checked~.details {
max-height: 100vh;
opacity: 1;
}
<div>
<input id="toggle0" class="toggle" type="checkbox">
<label for="toggle0">
This is the summary
</label>
<div class="details">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus felis eget ligula pretium, a feugiat turpis commodo. Quisque nunc ligula, posuere eget lacus vel, condimentum convallis nulla. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Nullam consectetur lobortis libero, at pulvinar turpis. Sed semper leo id quam vestibulum, id bibendum dolor molestie. Nam eu porttitor est, et facilisis neque. Nullam id ultrices nibh, vel lacinia velit. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas ut nibh eget maximus. Etiam quis odio dignissim, facilisis orci vitae, fermentum eros. Proin luctus felis et nunc ultrices, sed rhoncus est finibus.
</div>
</div>
Some text below.
Caveat: since we transition max-height
between 0 and 100vh, this won't work if the height of the content is larger than the height of the window. In that case, you can either use a larger number or add overflow: auto
to .toggle:checked~.details
(so that you get a scrollbar).
EDIT: Alternatively, we could achieve something similar using some Javascript as well:
function onClick(event) {
let details = event.target.parentElement;
details.style['overflow'] = 'hidden';
if (details.open) {
event.preventDefault();
setTimeout(function () {
details.open = false;
details.style['overflow'] = 'visible';
}, 500);
details.style['max-height'] = '1em';
} else {
details.style['max-height'] = '100vh';
}
}
window.onload = function () {
for (summary of document.getElementsByTagName('summary')) {
summary.addEventListener('click', onClick);
}
}
details {
transition: max-height .5s;
max-height: 1em;
}
<details>
<summary>
This is the summary
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rhoncus felis eget ligula pretium, a feugiat turpis commodo. Quisque nunc ligula, posuere eget lacus vel, condimentum convallis nulla. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Nullam consectetur lobortis libero, at pulvinar turpis. Sed semper leo id quam vestibulum, id bibendum dolor molestie. Nam eu porttitor est, et facilisis neque. Nullam id ultrices nibh, vel lacinia velit. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egestas ut nibh eget maximus. Etiam quis odio dignissim, facilisis orci vitae, fermentum eros. Proin luctus felis et nunc ultrices, sed rhoncus est finibus.
</details>
Some text below.
Note that this has the same problem as before, but additionally won't work if the summary takes up more than one line. Also, glyphs containing descenders (g, j, p, q, y, ç, ŋ, µ, ...) flicker slightly when closing.