<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>