Looking to find coding to have a multi-layered accordion dropdown in my FAQ

Looking to find coding to have a multi-layered accordion dropdown in my FAQ.

+ Heading 1 (question 1 and question 2 are housed in this heading and then each question can be dropped down as well)

+ Question 1

Answer

+ Question 2

Answer

Try this. Just add a code block to the page in question and paste the below in - then tweak the questions/answers and CSS at end as required:

<div class="accordion">
  <div class="accordion-item">
    <div class="accordion-item-header">
      QUESTION 1
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        ANSWER 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-item-header">
      QUESTION 2
    </div>
    <div class="accordion-item-body">
      <div class="accordion-item-body-content">
        ANSWER 2
      </div>
    </div>
  </div>
</div>

<script>
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");

accordionItemHeaders.forEach(accordionItemHeader => {
  accordionItemHeader.addEventListener("click", event => {
    accordionItemHeader.classList.toggle("active");
    const accordionItemBody = accordionItemHeader.nextElementSibling;
    if(accordionItemHeader.classList.contains("active")) {
      accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
    }
    else {
      accordionItemBody.style.maxHeight = 0;
    }
    
  });
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.accordion {
  width: 70%;
  margin: 2rem auto;
}
.accordion-item {
  color: #111;
  margin: 1rem 0;
  border-radius: 0.5rem;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
  padding: 20px 50px 20px 15px;   
  background: linear-gradient(25deg, #F5F5F5 50%, #c3c9d0 80%) !important;
  font-weight: bold;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.accordion-item-header::after {
  content: "\002B";
  font-size: 2rem;
  position: absolute;
  right: 1rem;
}
.accordion-item-header.active::after {
  content: "\2212";
}
.accordion-item-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
  padding: 1rem;
    background-color: #F5F5F5 !important;
  border-top: 1px solid;
  border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}

@media(max-width:767px) {
  html {
    font-size: 14px;}
    .accordion {
  width: 90%;
  margin: 2rem auto;
    }
  }
}
 </style>

Hi. Do you still need help on this?

Hi,
Please check this free extension.  You can build your FAQ accordion without coding. Just check this styles and this video to learn more how it works.

Please let me know if you have any question or add me to install it for you!

Best,
Leopold

@tuanphan Yes I still do need help. I have a regular accordion drop down menu, which are what most people assume I am looking for. I want something that drops down multiple times if that makes sense. Thank you.

On 3/7/2021 at 10:50 PM, jmsippl0 said:

@tuanphan Yes I still do need help. I have a regular accordion drop down menu, which are what most people assume I am looking for. I want something that drops down multiple times if that makes sense. Thank you.

Can you share link to faq page? We can check easier