<style> .accordion {
width: 100%; background: #fff; text-align: left;
} .accordion:hover {
background-color: #F7F7F7;
} .accordion__trigger {
-webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: inherit; /* text-transform: uppercase; */ letter-spacing: 2px; padding: 1rem 1.5rem; background: #333; color: white; cursor: pointer; transition: 0.3s ease; border: 0 none; border-bottom: 1px solid #555; width: 100%; text-align: left; margin: 0; position: relative;
} .accordion__trigger::after {
content: ""; position: absolute; right: 20px; top: calc(50% - 5px); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #fff; transform: rotate(0deg); transform-origin: center; transition: transform 0.5s;
} .accordion__trigger::after {
transform: rotate(180deg);
} .accordion__copy {
overflow: hidden; padding: 0 1.5rem 0 1.5rem; color: #666; line-height: 1.6; font-size: 1rem; font-weight: 500; max-height: 0; visibility: hidden; transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
} .accordion__copy–open {
visibility: visible;
} .accordion__copy__pic {
width: 100px; height: auto; float: right; margin: 0 0 0 20px;
} @media (min-width: 540px) {
.container__head { font-size: 2rem; } .accordion__copy__pic { width: 180px; }
}
</style>
<script> // Thank you codepen.io/sgestrella/pen/byjPgQ (function () {
const headings = document.querySelectorAll(".accordion__heading"); const triggers = []; const accordionContents = document.querySelectorAll(".accordion__copy"); const copyOpenClass = "accordion__copy--open"; headings.forEach((h, i) => { let btn = h.querySelector("button"); triggers.push(btn); let target = h.nextElementSibling; btn.onclick = () => { let expanded = btn.getAttribute("aria-expanded") === "true"; if (expanded) { closeItem(target, btn); } else { openItem(target, btn); } }; }); function closeAllExpandedItems() { const expandedTriggers = triggers.filter( (t) => t.getAttribute("aria-expanded") === "true" ); const expandedCopy = Array.from(accordionContents).filter((c) => c.classList.value.includes(copyOpenClass) ); expandedTriggers.forEach((trigger) => { trigger.setAttribute("aria-expanded", false); }); expandedCopy.forEach((copy) => { copy.classList.remove(copyOpenClass); copy.style.maxHeight = 0; copy.style.padding = "0 1.5rem 0 1.5rem"; }); } function closeItem(target, btn) { closeAllExpandedItems(); btn.setAttribute("aria-expanded", false); target.classList.remove(copyOpenClass); target.style.maxHeight = 0; target.style.padding = "0 1.5rem 0 1.5rem"; } function openItem(target, btn) { closeAllExpandedItems(); btn.setAttribute("aria-expanded", true); target.classList.add(copyOpenClass); target.style.maxHeight = target.scrollHeight + "px"; target.style.padding = "1rem 1.5rem 2rem 1.5rem"; } setTimeout(() => triggers[0].click(), 750);
})();
</script>