'How to close all accordion panels on window resize?

My accordion is designed have multiple panels open when the window is greater than 992px. When the window is less than 992px, then only one panel will open at a time.

If multiple panels are opened and then the window is resized (like going from a tablet landscape view to a tablet portrait view), then all the panels still remain opened.

My question is If the window is greater than 992px, and I have open panels... how can I set all the panels to close if the window is resized to less than 992px?

(function () {
  const panels = document.querySelectorAll(".panel");

  panels.forEach(function (panel) {
    const links = panel.querySelectorAll(
      "a, .youtube-embed button, .wistia button"
    );
    [].forEach.call(links, (link) => link.setAttribute("tabindex", "-1"));
  });
})();

// gets accordion heights
let accordionBody = document.querySelectorAll(".acc-body");
accordionHeight(accordionBody);

function accordionHeight(accordionBody) {
  accordionBody.forEach(function (accordion, i) {
    accordion.classList.contains("acc-body--init")
      ? (accordion.removeAttribute("style"),
        accordion.classList.remove("acc-body--init"))
      : null;
    let bb = accordion.getBoundingClientRect(),
      hh = bb.height;
    accordion.setAttribute("data-height", hh * 2.5 + "px");
    accordion.classList.add("acc-body--init");
  });
}

// add click event handlers
let accTriggers = document.querySelectorAll(".acc-trigger");
accTriggers.forEach(function (btn, i) {
  btn.addEventListener("click", function (e) {
    let panel = e.currentTarget.closest(".panel"),
      accordion = panel.querySelector(".acc-body"),
      accHeight = accordion.getAttribute("data-height"),
      opened = document.querySelectorAll(".active");

    panel.classList.toggle("active"); // toggle this btn state

    panel.classList.contains("active")
      ? (accordion.style.maxHeight = accHeight)
      : (accordion.style.maxHeight = "0px");

    const panels = document.querySelectorAll(".panel"); // apply max-height from data-attribute

    panels.forEach(function (panel) {
      const links = panel.querySelectorAll("a, .youtube-embed button");
      panel.classList.contains("active")
        ? [].forEach.call(links, (link) => link.setAttribute("tabindex", "0"))
        : [].forEach.call(links, (link) => link.setAttribute("tabindex", "-1"));
    });
    closeOpened(opened);
  });
});

// add close all previously opened
function closeOpened(opened) {
  if (!isWideScreen()) {
    opened.forEach(function (panel, i) {
      let accordion = panel.querySelector(".acc-body");
      panel.classList.remove("active");
      accordion.style.maxHeight = "0px";
    });
  }
}

let isWideScreen = () => {
  return window.matchMedia("(min-width: 992px)").matches;
};

//delivers icon to html
const icons = document.querySelectorAll("span .acc-icon");
Array.prototype.forEach.call(icons, (icon) => {
  icon.innerHTML = `
    <svg class="acc-icon" width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" />
    </svg>  
  `;
});

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 36px;
}

.wrapper {
  margin: 50px auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px) {
  .wrapper {
    flex-direction: row;
  }
}
.wrapper a {
  text-decoration: none;
}
.wrapper button {
  border-style: none;
  background: #fff;
}
.wrapper button::-moz-focus-inner {
  border: 0;
}
@media (min-width: 992px) {
  .wrapper .accordion + .accordion {
    margin-top: unset;
  }
}
@media (min-width: 992px) {
  .wrapper .accordion:first-child {
    margin-right: 1rem;
  }
}
@media (min-width: 992px) {
  .wrapper .accordion {
    flex: 1;
  }
  .wrapper .accordion + .youtube-embed,
  .wrapper .accordion + .wistia {
    margin: 1rem 0;
  }
  .wrapper .accordion:last-child {
    margin-left: 1rem;
  }
}
.wrapper .accordion .panel {
  margin: 0;
  margin-top: 2rem;
  border-bottom: 1px solid #000a70;
  position: relative;
}
.wrapper .accordion .panel:not(.active) .acc-body p,
.wrapper .accordion .panel blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
}
.wrapper .accordion .panel .acc-trigger {
  display: block;
  font-weight: 400;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: 0 0;
}
.wrapper .accordion .panel .acc-trigger .acc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: 0;
  padding-bottom: 0.5rem;
  transition: all 0.2s ease;
}
.wrapper .accordion .panel .acc-trigger .acc-title h4 {
  font-weight: 800;
  color: #000a70;
  font-size: 1.25rem;
  line-height: 1.75rem;
  justify-content: space-between;
  margin-right: 1rem;
  outline: 0;
  transition: all 0.2s ease;
}
.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon {
  cursor: pointer;
  pointer-events: none;
  margin-left: auto;
  z-index: 3;
}
.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon path {
  transition: all 0.2s ease;
}
.wrapper .accordion .panel .acc-trigger .acc-title:hover h4 {
  color: #005fec;
}
.wrapper .accordion .panel .acc-trigger .acc-title:hover svg.acc-icon path {
  fill: #005fec;
}
.wrapper .accordion .panel .acc-body {
  position: absolute;
  height: auto;
  visibility: hidden;
  clip: rect(0px auto 2px 0px);
}
.wrapper .accordion .panel .acc-body--init {
  position: relative;
  overflow: hidden;
  max-height: 0px;
  clip: unset;
  visibility: visible;
  transition: all 0.2s ease-out;
}
.wrapper .accordion .panel .acc-body .active .acc-body--init {
  max-height: 500px;
}
.wrapper .accordion .panel .acc-body ol {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  counter-reset: my-awesome-counter;
  padding-left: 0;
}
.wrapper .accordion .panel .acc-body ol li {
  counter-increment: my-awesome-counter;
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000a70;
}
.wrapper .accordion .panel .acc-body ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #005fec;
  position: absolute;
  left: 0;
}
.wrapper .accordion .panel .acc-body ol li:last-child {
  margin-bottom: 0;
}
.wrapper .accordion .panel .acc-body ol li a {
  color: #005fec;
}
.wrapper .accordion .panel .acc-body ol li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}
.wrapper .accordion .panel .acc-body ol + p {
  margin-top: 1rem;
}
.wrapper .accordion .panel .acc-body ul.custom-list {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  padding-left: 0;
}
.wrapper .accordion .panel .acc-body ul.custom-list li {
  background-image: url(/assets/svg/bullet.svg);
  background-position: 0 0.5rem;
  background-repeat: no-repeat;
  padding-left: 1.25rem;
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}
.wrapper .accordion .panel .acc-body ul.custom-list li a {
  color: #005fec;
}
.wrapper .accordion .panel .acc-body ul.custom-list li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}
.wrapper .accordion .panel .acc-body ul.custom-list li:last-child {
  margin-bottom: 0;
}
.wrapper .accordion .panel .acc-body ul.custom-list + p {
  margin-top: 1rem !important;
}
.wrapper .accordion .panel.active {
  padding-bottom: 1rem;
}
.wrapper .accordion .panel.active .acc-body {
  opacity: 1;
  height: auto;
  visibility: visible;
}
.wrapper .accordion .panel.active .acc-body p,
.wrapper .accordion .panel.active .acc-body blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
}
.wrapper .accordion .panel.active .acc-body p + p,
.wrapper .accordion .panel.active .acc-body blockquote + p {
  margin-top: 1rem;
}
.wrapper .accordion .panel.active .acc-body p + .embed-youtube,
.wrapper .accordion .panel.active .acc-body blockquote + .embed-youtube {
  margin: 1rem 0;
}
.wrapper .accordion .panel.active .acc-body p a,
.wrapper .accordion .panel.active .acc-body blockquote a {
  color: #005fec;
}
.wrapper .accordion .panel.active .acc-body p a:hover,
.wrapper .accordion .panel.active .acc-body blockquote a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}
.wrapper .accordion .panel.active span .acc-icon {
  transform: rotate(90deg);
}
.wrapper .accordion .panel.active .acc-trigger .acc-title {
  border-bottom: 0;
}
.acc-title span svg.acc-icon {
  transition: all 0.2s ease;
  min-width: 1rem;
}

<section id="questions">
  <div class="container">
    <div class="row justify-content-center align-items-start">
      <h3>FAQs</h3>
      <div class="wrapper">
        <div class="accordion">
          <div class="panel">
            <button class="acc-trigger">
              <span class="acc-title">
                <h4>How to button a shirt?</h4>
                <span class="acc-icon"></span>
              </span>
            </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, facere, necessitatibus velit quod recusandae doloribus itaque, quos voluptate ab unde accusamus? Exercitationem aperiam officiis quasi id nobis voluptatum, ea ullam!</p>
            </div>
          </div>
          <div class="panel">
            <button class="acc-trigger">
              <span class="acc-title">
                <h4>How to put on a t-shirt?</h4>
                <span class="acc-icon"></span>
              </span>
            </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda dolorum repudiandae, ipsa molestias doloribus laudantium nemo neque et nihil illo necessitatibus maiores eligendi cupiditate inventore possimus tenetur odio corrupti dignissimos.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

javascript

Solution 1:^[1]

You could extend the closing/collapsing function by adding a resize boolean parameter:

// add close all previously opened
function closeOpened(opened, resized=false) {
  if (!isWideScreen() || resized ) {
    opened.forEach(function (panel, i) {
      let accordion = panel.querySelector(".acc-body");
      panel.classList.remove("active");
      accordion.style.maxHeight = "0px";
    });
  }
}

Then add a resize event listener calling the collapse function (with resize == true):

// resize event listener
window.addEventListener('resize', () => {
    opened = document.querySelectorAll(".active");
    closeOpened(opened, true);
});

Example

(function() {
  const panels = document.querySelectorAll(".panel");

  panels.forEach(function(panel) {
    const links = panel.querySelectorAll(
      "a, .youtube-embed button, .wistia button"
    );
    [].forEach.call(links, (link) => link.setAttribute("tabindex", "-1"));
  });
})();

// gets accordion heights
let accordionBody = document.querySelectorAll(".acc-body");
accordionHeight(accordionBody);

function accordionHeight(accordionBody) {
  accordionBody.forEach(function(accordion, i) {
    accordion.classList.contains("acc-body--init") ?
      (accordion.removeAttribute("style"),
        accordion.classList.remove("acc-body--init")) :
      null;
    let bb = accordion.getBoundingClientRect(),
      hh = bb.height;
    accordion.setAttribute("data-height", hh * 2.5 + "px");
    accordion.classList.add("acc-body--init");
  });
}

// add click event handlers
let accTriggers = document.querySelectorAll(".acc-trigger");
accTriggers.forEach(function(btn, i) {
  btn.addEventListener("click", function(e) {
    let panel = e.currentTarget.closest(".panel"),
      accordion = panel.querySelector(".acc-body"),
      accHeight = accordion.getAttribute("data-height"),
      opened = document.querySelectorAll(".active");

    panel.classList.toggle("active"); // toggle this btn state

    panel.classList.contains("active") ?
      (accordion.style.maxHeight = accHeight) :
      (accordion.style.maxHeight = "0px");

    const panels = document.querySelectorAll(".panel"); // apply max-height from data-attribute

    panels.forEach(function(panel) {
      const links = panel.querySelectorAll("a, .youtube-embed button");
      panel.classList.contains("active") ?
        [].forEach.call(links, (link) => link.setAttribute("tabindex", "0")) :
        [].forEach.call(links, (link) => link.setAttribute("tabindex", "-1"));
    });
    closeOpened(opened);
  });
});

// add close all previously opened
function closeOpened(opened, resized = false) {
  if (!isWideScreen() || resized) {
    opened.forEach(function(panel, i) {
      let accordion = panel.querySelector(".acc-body");
      panel.classList.remove("active");
      accordion.style.maxHeight = "0px";
    });
  }
}

// resize event listener
window.addEventListener('resize', () => {
  opened = document.querySelectorAll(".active");
  closeOpened(opened, true);
});




let isWideScreen = () => {
  return window.matchMedia("(min-width: 992px)").matches;
};

//delivers icon to html
const icons = document.querySelectorAll("span .acc-icon");
Array.prototype.forEach.call(icons, (icon) => {
  icon.innerHTML = `
    <svg class="acc-icon" width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" />
    </svg>  
  `;
});

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 36px;
}

.wrapper {
  margin: 50px auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .wrapper {
    flex-direction: row;
  }
}

.wrapper a {
  text-decoration: none;
}

.wrapper button {
  border-style: none;
  background: #fff;
}

.wrapper button::-moz-focus-inner {
  border: 0;
}

@media (min-width: 992px) {
  .wrapper .accordion+.accordion {
    margin-top: unset;
  }
}

@media (min-width: 992px) {
  .wrapper .accordion:first-child {
    margin-right: 1rem;
  }
}

@media (min-width: 992px) {
  .wrapper .accordion {
    flex: 1;
  }
  .wrapper .accordion+.youtube-embed,
  .wrapper .accordion+.wistia {
    margin: 1rem 0;
  }
  .wrapper .accordion:last-child {
    margin-left: 1rem;
  }
}

.wrapper .accordion .panel {
  margin: 0;
  margin-top: 2rem;
  border-bottom: 1px solid #000a70;
  position: relative;
}

.wrapper .accordion .panel:not(.active) .acc-body p,
.wrapper .accordion .panel blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel .acc-trigger {
  display: block;
  font-weight: 400;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: 0 0;
}

.wrapper .accordion .panel .acc-trigger .acc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: 0;
  padding-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title h4 {
  font-weight: 800;
  color: #000a70;
  font-size: 1.25rem;
  line-height: 1.75rem;
  justify-content: space-between;
  margin-right: 1rem;
  outline: 0;
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon {
  cursor: pointer;
  pointer-events: none;
  margin-left: auto;
  z-index: 3;
}

.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon path {
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title:hover h4 {
  color: #005fec;
}

.wrapper .accordion .panel .acc-trigger .acc-title:hover svg.acc-icon path {
  fill: #005fec;
}

.wrapper .accordion .panel .acc-body {
  position: absolute;
  height: auto;
  visibility: hidden;
  clip: rect(0px auto 2px 0px);
}

.wrapper .accordion .panel .acc-body--init {
  position: relative;
  overflow: hidden;
  max-height: 0px;
  clip: unset;
  visibility: visible;
  transition: all 0.2s ease-out;
}

.wrapper .accordion .panel .acc-body .active .acc-body--init {
  max-height: 500px;
}

.wrapper .accordion .panel .acc-body ol {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  counter-reset: my-awesome-counter;
  padding-left: 0;
}

.wrapper .accordion .panel .acc-body ol li {
  counter-increment: my-awesome-counter;
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000a70;
}

.wrapper .accordion .panel .acc-body ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #005fec;
  position: absolute;
  left: 0;
}

.wrapper .accordion .panel .acc-body ol li:last-child {
  margin-bottom: 0;
}

.wrapper .accordion .panel .acc-body ol li a {
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ol li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel .acc-body ol+p {
  margin-top: 1rem;
}

.wrapper .accordion .panel .acc-body ul.custom-list {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  padding-left: 0;
}

.wrapper .accordion .panel .acc-body ul.custom-list li {
  background-image: url(/assets/svg/bullet.svg);
  background-position: 0 0.5rem;
  background-repeat: no-repeat;
  padding-left: 1.25rem;
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel .acc-body ul.custom-list li a {
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list li:last-child {
  margin-bottom: 0;
}

.wrapper .accordion .panel .acc-body ul.custom-list+p {
  margin-top: 1rem !important;
}

.wrapper .accordion .panel.active {
  padding-bottom: 1rem;
}

.wrapper .accordion .panel.active .acc-body {
  opacity: 1;
  height: auto;
  visibility: visible;
}

.wrapper .accordion .panel.active .acc-body p,
.wrapper .accordion .panel.active .acc-body blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel.active .acc-body p+p,
.wrapper .accordion .panel.active .acc-body blockquote+p {
  margin-top: 1rem;
}

.wrapper .accordion .panel.active .acc-body p+.embed-youtube,
.wrapper .accordion .panel.active .acc-body blockquote+.embed-youtube {
  margin: 1rem 0;
}

.wrapper .accordion .panel.active .acc-body p a,
.wrapper .accordion .panel.active .acc-body blockquote a {
  color: #005fec;
}

.wrapper .accordion .panel.active .acc-body p a:hover,
.wrapper .accordion .panel.active .acc-body blockquote a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel.active span .acc-icon {
  transform: rotate(90deg);
}

.wrapper .accordion .panel.active .acc-trigger .acc-title {
  border-bottom: 0;
}

.acc-title span svg.acc-icon {
  transition: all 0.2s ease;
  min-width: 1rem;
}

<section id="questions">
  <div class="container">
    <div class="row justify-content-center align-items-start">
      <h3>FAQs</h3>
      <div class="wrapper">
        <div class="accordion">
          <div class="panel">
            <button class="acc-trigger">
                    <span class="acc-title">
                      <h4>How to button a shirt?</h4>
                      <span class="acc-icon"></span>
                    </span>
                  </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, facere, necessitatibus velit quod recusandae doloribus itaque, quos voluptate ab unde accusamus? Exercitationem aperiam officiis quasi id nobis voluptatum, ea ullam!</p>
            </div>
          </div>
          <div class="panel">
            <button class="acc-trigger">
                    <span class="acc-title">
                      <h4>How to put on a t-shirt?</h4>
                      <span class="acc-icon"></span>
                    </span>
                  </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda dolorum repudiandae, ipsa molestias doloribus laudantium nemo neque et nihil illo necessitatibus maiores eligendi cupiditate inventore possimus tenetur odio corrupti dignissimos.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Example: keep last panel closed on resize

// save last opened panel id in variable
let lastOpened = '';
(function () {
  const panels = document.querySelectorAll(".panel");

  panels.forEach(function (panel, i) {
    // addf auto id
    panel.id = panel.id ? panel.id : 'panel-'+i;
    const links = panel.querySelectorAll(
      "a, .youtube-embed button, .wistia button"
    );
    [].forEach.call(links, (link) => link.setAttribute("tabindex", "-1"));
  });
})();

// gets accordion heights
let accordionBody = document.querySelectorAll(".acc-body");
accordionHeight(accordionBody);

function accordionHeight(accordionBody) {
  accordionBody.forEach(function (accordion, i) {
    accordion.classList.contains("acc-body--init")
      ? (accordion.removeAttribute("style"),
        accordion.classList.remove("acc-body--init"))
      : null;
    let bb = accordion.getBoundingClientRect(),
      hh = bb.height;
    accordion.setAttribute("data-height", hh * 2.5 + "px");
    accordion.classList.add("acc-body--init");
  });
}

// add click event handlers
let accTriggers = document.querySelectorAll(".acc-trigger");
accTriggers.forEach(function (btn, i) {
  btn.addEventListener("click", function (e) {
    let panel = e.currentTarget.closest(".panel"),
      accordion = panel.querySelector(".acc-body"),
      accHeight = accordion.getAttribute("data-height"),
      opened = document.querySelectorAll(".active");
      // save last opened
      lastOpened = panel.id;
      console.log(lastOpened)

    panel.classList.toggle("active"); // toggle this btn state

    panel.classList.contains("active")
      ? (accordion.style.maxHeight = accHeight)
      : (accordion.style.maxHeight = "0px");

    const panels = document.querySelectorAll(".panel"); // apply max-height from data-attribute

    panels.forEach(function (panel) {
      const links = panel.querySelectorAll("a, .youtube-embed button");
      panel.classList.contains("active")
        ? [].forEach.call(links, (link) => link.setAttribute("tabindex", "0"))
        : [].forEach.call(links, (link) => link.setAttribute("tabindex", "-1"));
    });
    closeOpened(opened);
  });
});

// add close all previously opened
function closeOpened(opened, resized=false, closeLast=true) {
  if (!isWideScreen() || resized ) {
    opened.forEach(function (panel, i) {
      let accordion = panel.querySelector(".acc-body");
      let closeThis = true;
      if(panel.id === lastOpened && !closeLast){
        closeThis = false;
      } 
      if(closeThis){
        panel.classList.remove("active");
        accordion.style.maxHeight = "0px";
      }
    });
  }
}

// resize event listener
window.addEventListener('resize', () => {
    opened = document.querySelectorAll(".active");
    closeOpened(opened, true, false);
});




let isWideScreen = () => {
  return window.matchMedia("(min-width: 992px)").matches;
};

//delivers icon to html
const icons = document.querySelectorAll("span .acc-icon");
Array.prototype.forEach.call(icons, (icon) => {
  icon.innerHTML = `
    <svg class="acc-icon" width="16" height="11" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 2.82813L2 0.828126L8 6.82813L14 0.828126L16 2.82813L8 10.8281L0 2.82813Z" fill="currentColor" />
    </svg>  
  `;
});

.container {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 36px;
}

.wrapper {
  margin: 50px auto 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .wrapper {
    flex-direction: row;
  }
}

.wrapper a {
  text-decoration: none;
}

.wrapper button {
  border-style: none;
  background: #fff;
}

.wrapper button::-moz-focus-inner {
  border: 0;
}

@media (min-width: 992px) {
  .wrapper .accordion+.accordion {
    margin-top: unset;
  }
}

@media (min-width: 992px) {
  .wrapper .accordion:first-child {
    margin-right: 1rem;
  }
}

@media (min-width: 992px) {
  .wrapper .accordion {
    flex: 1;
  }
  .wrapper .accordion+.youtube-embed,
  .wrapper .accordion+.wistia {
    margin: 1rem 0;
  }
  .wrapper .accordion:last-child {
    margin-left: 1rem;
  }
}

.wrapper .accordion .panel {
  margin: 0;
  margin-top: 2rem;
  border-bottom: 1px solid #000a70;
  position: relative;
}

.wrapper .accordion .panel:not(.active) .acc-body p,
.wrapper .accordion .panel blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel .acc-trigger {
  display: block;
  font-weight: 400;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
  width: 100%;
  cursor: pointer;
  background: 0 0;
}

.wrapper .accordion .panel .acc-trigger .acc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: 0;
  padding-bottom: 0.5rem;
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title h4 {
  font-weight: 800;
  color: #000a70;
  font-size: 1.25rem;
  line-height: 1.75rem;
  justify-content: space-between;
  margin-right: 1rem;
  outline: 0;
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon {
  cursor: pointer;
  pointer-events: none;
  margin-left: auto;
  z-index: 3;
}

.wrapper .accordion .panel .acc-trigger .acc-title svg.acc-icon path {
  transition: all 0.2s ease;
}

.wrapper .accordion .panel .acc-trigger .acc-title:hover h4 {
  color: #005fec;
}

.wrapper .accordion .panel .acc-trigger .acc-title:hover svg.acc-icon path {
  fill: #005fec;
}

.wrapper .accordion .panel .acc-body {
  position: absolute;
  height: auto;
  visibility: hidden;
  clip: rect(0px auto 2px 0px);
}

.wrapper .accordion .panel .acc-body--init {
  position: relative;
  overflow: hidden;
  max-height: 0px;
  clip: unset;
  visibility: visible;
  transition: all 0.2s ease-out;
}

.wrapper .accordion .panel .acc-body .active .acc-body--init {
  max-height: 500px;
}

.wrapper .accordion .panel .acc-body ol {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  counter-reset: my-awesome-counter;
  padding-left: 0;
}

.wrapper .accordion .panel .acc-body ol li {
  counter-increment: my-awesome-counter;
  padding-left: 1.25rem;
  margin: 2rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
  color: #000a70;
}

.wrapper .accordion .panel .acc-body ol li::before {
  content: counter(my-awesome-counter) ". ";
  color: #005fec;
  position: absolute;
  left: 0;
}

.wrapper .accordion .panel .acc-body ol li:last-child {
  margin-bottom: 0;
}

.wrapper .accordion .panel .acc-body ol li a {
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ol li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel .acc-body ol+p {
  margin-top: 1rem;
}

.wrapper .accordion .panel .acc-body ul.custom-list {
  list-style-type: none;
  -webkit-margin-before: 0;
  margin-block-start: 0;
  -webkit-margin-after: 0;
  margin-block-end: 0;
  padding-left: 0;
}

.wrapper .accordion .panel .acc-body ul.custom-list li {
  background-image: url(/assets/svg/bullet.svg);
  background-position: 0 0.5rem;
  background-repeat: no-repeat;
  padding-left: 1.25rem;
  margin: 1rem 0;
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel .acc-body ul.custom-list li a {
  color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list li a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel .acc-body ul.custom-list li:last-child {
  margin-bottom: 0;
}

.wrapper .accordion .panel .acc-body ul.custom-list+p {
  margin-top: 1rem !important;
}

.wrapper .accordion .panel.active {
  padding-bottom: 1rem;
}

.wrapper .accordion .panel.active .acc-body {
  opacity: 1;
  height: auto;
  visibility: visible;
}

.wrapper .accordion .panel.active .acc-body p,
.wrapper .accordion .panel.active .acc-body blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
}

.wrapper .accordion .panel.active .acc-body p+p,
.wrapper .accordion .panel.active .acc-body blockquote+p {
  margin-top: 1rem;
}

.wrapper .accordion .panel.active .acc-body p+.embed-youtube,
.wrapper .accordion .panel.active .acc-body blockquote+.embed-youtube {
  margin: 1rem 0;
}

.wrapper .accordion .panel.active .acc-body p a,
.wrapper .accordion .panel.active .acc-body blockquote a {
  color: #005fec;
}

.wrapper .accordion .panel.active .acc-body p a:hover,
.wrapper .accordion .panel.active .acc-body blockquote a:hover {
  text-decoration: underline;
  text-decoration-color: #005fec;
}

.wrapper .accordion .panel.active span .acc-icon {
  transform: rotate(90deg);
}

.wrapper .accordion .panel.active .acc-trigger .acc-title {
  border-bottom: 0;
}

.acc-title span svg.acc-icon {
  transition: all 0.2s ease;
  min-width: 1rem;
}

<section id="questions">
  <div class="container">
    <div class="row justify-content-center align-items-start">
      <h3>FAQs</h3>
      <div class="wrapper">
        <div class="accordion">
          <div class="panel">
            <button class="acc-trigger">
                    <span class="acc-title">
                      <h4>How to button a shirt?</h4>
                      <span class="acc-icon"></span>
                    </span>
                  </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, facere, necessitatibus velit quod recusandae doloribus itaque, quos voluptate ab unde accusamus? Exercitationem aperiam officiis quasi id nobis voluptatum, ea ullam!</p>
            </div>
          </div>

          <div class="panel">
            <button class="acc-trigger">
                    <span class="acc-title">
                      <h4>How to put on a t-shirt?</h4>
                      <span class="acc-icon"></span>
                    </span>
                  </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda dolorum repudiandae, ipsa molestias doloribus laudantium nemo neque et nihil illo necessitatibus maiores eligendi cupiditate inventore possimus tenetur odio corrupti dignissimos.</p>
            </div>
          </div>

          <div class="panel" id="panel-last">
            <button class="acc-trigger">
                    <span class="acc-title">
                      <h4>How to put on a t-shirt?</h4>
                      <span class="acc-icon"></span>
                    </span>
                  </button>
            <div class="acc-body">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda dolorum repudiandae, ipsa molestias doloribus laudantium nemo neque et nihil illo necessitatibus maiores eligendi cupiditate inventore possimus tenetur odio corrupti dignissimos.</p>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</section>

To keep the last opened panel expanded on resize you could add ids to each panel and save the last opened panel id to a variable.
Then you could check in your collapsing function if the currently reached panel (within the forEach loop) is the last opened one. Pretty clunky, but you could modify it.

Honestly: I think this behavior might be rather confusing for users since it might not be clear, why some panels get collapsed while others not.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How to close all accordion panels on window resize?

Solution 1:[1]

Example

Example: keep last panel closed on resize

Sources

Related Questions

Solution 1:^[1]