Accordion by Usecue

 1<ul class="accordion">
 2    <li>
 3        <h2>Lorem Ipsum</h2>
 4        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, dolor in porta lacinia, mauris ipsum laoreet nisi, sit amet vehicula tortor velit eget dolor. Phasellus luctus diam mi, id hendrerit ligula convallis eu. Nulla at ante ex. Vivamus interdum erat vitae convallis tincidunt. Vivamus posuere risus nisi, non lacinia elit viverra non. Etiam nec bibendum diam. Ut pellentesque aliquet blandit. Aenean ullamcorper ultrices diam, a volutpat nisi tincidunt vel. Nunc elementum placerat pharetra. Donec metus enim, iaculis at commodo quis, tincidunt a lacus. Aenean sit amet magna magna. Proin nec lectus urna. Curabitur consectetur convallis aliquet. Donec tincidunt quam a nunc pharetra, id dignissim eros facilisis. Pellentesque vel tincidunt ante. Nullam ullamcorper scelerisque diam, et pharetra sem egestas ac.</p>
 5        <p>Integer sit amet hendrerit enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi viverra nisi diam, at venenatis massa pretium sagittis. Pellentesque a accumsan est. Aenean vulputate urna non nisi vestibulum imperdiet. Nunc diam nibh, congue at aliquam nec, congue a libero. Quisque bibendum nunc ut ultrices egestas. Maecenas porta lacus nulla, ut tincidunt augue tristique ac. Nunc sed justo sapien. Nam vulputate enim nisi, ac facilisis felis vestibulum nec. Nam orci dui, malesuada a bibendum non, interdum sed nunc.</p>
 6        <p>&nbsp;</p>
 7    </li>
 8    <li>
 9        <h2>Dolor Sit Amet</h2>
10        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius, dolor in porta lacinia, mauris ipsum laoreet nisi, sit amet vehicula tortor velit eget dolor. Phasellus luctus diam mi, id hendrerit ligula convallis eu. Nulla at ante ex. Vivamus interdum erat vitae convallis tincidunt. Vivamus posuere risus nisi, non lacinia elit viverra non. Etiam nec bibendum diam. Ut pellentesque aliquet blandit. Aenean ullamcorper ultrices diam, a volutpat nisi tincidunt vel. Nunc elementum placerat pharetra. Donec metus enim, iaculis at commodo quis, tincidunt a lacus. Aenean sit amet magna magna. Proin nec lectus urna. Curabitur consectetur convallis aliquet. Donec tincidunt quam a nunc pharetra, id dignissim eros facilisis. Pellentesque vel tincidunt ante. Nullam ullamcorper scelerisque diam, et pharetra sem egestas ac.</p>
11        <p>&nbsp;</p>
12    </li>
13    <li>
14        <h2>Consectetur Adipiscing</h2>
15        <p>Integer sit amet hendrerit enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi viverra nisi diam, at venenatis massa pretium sagittis. Pellentesque a accumsan est. Aenean vulputate urna non nisi vestibulum imperdiet. Nunc diam nibh, congue at aliquam nec, congue a libero. Quisque bibendum nunc ut ultrices egestas. Maecenas porta lacus nulla, ut tincidunt augue tristique ac. Nunc sed justo sapien. Nam vulputate enim nisi, ac facilisis felis vestibulum nec. Nam orci dui, malesuada a bibendum non, interdum sed nunc.</p>
16        <p>&nbsp;</p>
17    </li>
18</ul>
19
20<link rel="stylesheet" href="/demos/accordion/accordion.css" />
21<script src="/demos/accordion/accordion.js"></script>

 1ul.accordion {
 2    border-top: 1px solid rgba(0,0,0,0.16);
 3    margin-top: 3rem 0 0!important;
 4    padding: 0!important;
 5}
 6ul.accordion > li { 
 7    border-bottom: 1px solid rgba(0,0,0,0.16); 
 8    list-style: none;
 9    margin: 0!important;
10    padding: 0!important;
11}
12ul.accordion > li > * > button {
13    color: inherit; 
14    background: inherit; 
15    border: inherit;  
16    font-size: inherit; 
17    display: block; 
18    line-height: inherit; 
19    font-weight: inherit;
20    width: 100%; 
21    text-align: left; 
22    display: flex; 
23    align-items: center; 
24    cursor: pointer;  
25    font-family: inherit; 
26    font-weight: 600; 
27    padding-left: 2rem; 
28    position: relative; 
29}
30ul.accordion > li > * > button::before,
31ul.accordion > li > * > button::after {
32    content: ""; 
33    position: absolute;
34    width: .9rem; 
35    height: 2px; 
36    border-radius: 1rem; 
37    background: currentColor; 
38    transform: rotate(0deg);  
39    transition: transform .1s; 
40    left: 0.25rem; 
41}
42ul.accordion > li > * > button::before {
43    transform: rotate(90deg);  
44}
45ul.accordion > li > div { 
46    transition: padding .25s, max-height .25s;
47    overflow: hidden;  
48    width: calc(100% - 3rem); 
49    padding-left: 2rem;
50    display: flex; 
51    flex-direction: column; 
52}
53ul.accordion > li > div[aria-hidden=true] { 
54    max-height: 0px; 
55}
56ul.accordion > li > div[aria-hidden=false] {
57    max-height: var(--height, unset); 
58}
59ul.accordion > li > * > button[aria-expanded=true]::before { 
60   transform: rotate(0deg);
61}   

 1function prepAccordions() {
 2    const accordions = document.querySelectorAll("ul.accordion");
 3    accordions.forEach((accordion, accordionNumber) => {
 4        const items = [...accordion.querySelectorAll(":scope > li")].map(d => { return { node: d, title: d.firstElementChild.textContent, tag: d.firstElementChild.tagName, content: nodeListToString(d.querySelectorAll(":scope > *:first-child ~ *")) } });
 5        items.forEach((item, itemNumber) => restructure(item, accordionNumber, itemNumber));
 6    });
 7
 8    function restructure(item,accordionNumber, itemNumber) {
 9        const id = "accordion-" + accordionNumber + "-" + itemNumber;
10        item.node.innerHTML = `<${item.tag}><button aria-expanded='false' aria-controls='${id}'>${item.title}</button></${item.tag}><div aria-hidden='true' id='${id}'><div>${item.content}</div></div>`
11    }
12
13    function nodeListToString(list) {
14        return [...list].map(d => d.outerHTML).join(" ");
15    }
16}
17
18function setAccordionInteraction() {
19    const accordions = document.querySelectorAll("ul.accordion");
20    accordions.forEach(parent => {
21        const
22            accordions = [...parent.querySelectorAll(":scope > li")].map(d => { return { node: d, button: d.querySelector("button"), content: d.querySelector("div[aria-hidden]") } }),
23            openAccordion = accordion => {
24                accordion.node.style.setProperty("--height", accordion.content.firstElementChild.offsetHeight + "px");
25                accordion.button.ariaExpanded = true;
26                accordion.content.ariaHidden = false;
27            },
28            closeAccordion = accordion => {
29                accordion.node.style.setProperty("--height", accordion.content.firstElementChild.offsetHeight + "px");
30                requestAnimationFrame(() => requestAnimationFrame(() => {
31                    accordion.node.style.setProperty("--height", "0");
32                    accordion.button.ariaExpanded = false;
33                    accordion.content.ariaHidden = true;
34                }));
35            },
36            click = accordion => {
37                accordions.filter(d => d.button.ariaExpanded == "true").forEach(otherAccordion => closeAccordion(otherAccordion))
38                accordion.button.ariaExpanded == "false" ? openAccordion(accordion) : closeAccordion(accordion)
39            }
40
41        accordions.forEach(accordion => {
42            accordion.button.addEventListener("click", () => click(accordion))
43            accordion.content.addEventListener("transitionend", () => accordion.node.style.removeProperty("--height"));
44        });
45    });
46}
47
48function setupAccordions() {
49    prepAccordions();
50    setAccordionInteraction();
51}
52
53if (document.querySelector("ul.accordion")) setupAccordions();