Details typography

<details open>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details>
    <summary>Details</summary>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details open>
<summary class="bg-pink100 t-pink600 hover-bg-pink150 pad10-tb pad20-rl" style="--summary-marker: '➕'; --summary-marker-rotate: 135deg; --summary-marker-color: #B5386B; --summary-marker-time: .9s;">Details</summary>
    <div class="bg-pink50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group" open>
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<details class="details-group">
    <summary class="bg-gray100 hover-bg-gray150 pad10-tb pad20-rl">Details in group</summary>
    <div class="bg-gray50 pad20 animation-fade">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt, architecto.</div>
</details>

<script>
detailsToggle('details-group'); // any class group 

function detailsToggle(groupClass) {
    const details = Array.from(document.getElementsByClassName(groupClass));

    details.forEach((targetDetail) => {
        targetDetail.addEventListener('click', () => {
            details.forEach((detail) => {
                if (detail !== targetDetail) {
                    detail.removeAttribute('open');
                }
            });
        });
    });
}
</script>