Animated accordion demo

One

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officiis alias nemo, laboriosam optio consequatur molestiae doloremque iure facere voluptatem tempore, eum nisi explicabo, nobis magnam minima dolor necessitatibus perspiciatis.

Two

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officiis alias nemo, laboriosam optio consequatur molestiae doloremque iure facere voluptatem tempore, eum nisi explicabo, nobis magnam minima dolor necessitatibus perspiciatis.

Three

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officiis alias nemo, laboriosam optio consequatur molestiae doloremque iure facere voluptatem tempore, eum nisi explicabo, nobis magnam minima dolor necessitatibus perspiciatis.

Four

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde officiis alias nemo, laboriosam optio consequatur molestiae doloremque iure facere voluptatem tempore, eum nisi explicabo, nobis magnam minima dolor necessitatibus perspiciatis.

<details name="weirdal">
    <summary>One</summary>
    <p>Lorem ipsum dolor sit amet…</p>
</details>
<details name="weirdal">
    <summary>Two</summary>
    <p>Lorem ipsum dolor sit amet…</p>
</details>

:root {
    interpolate-size: allow-keywords;
}
details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.4s ease,
    content-visibility 0.4s allow-discrete;
}
details[open]::details-content {
    height: auto;
}
details {
    overflow: hidden;
    width: 30em;
}
summary {
    cursor: pointer;
    user-select: none;
}
summary:before {
    content: '+';
}
details[open] {
    background: #eee;
    >summary { background: moccasin; }
    >summary:before { content: '-'; }
}
details summary::-webkit-details-marker {
    display: none;
}