Jump to content

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

Recommended Posts

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>

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.