jmsippl0 Posted March 4, 2021 Share Posted March 4, 2021 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 Link to comment
ErikaT Posted March 6, 2021 Share Posted March 6, 2021 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> Beyondspace 1 Link to comment
tuanphan Posted March 7, 2021 Share Posted March 7, 2021 Hi. Do you still need help on this? 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
IXStudio Posted March 7, 2021 Share Posted March 7, 2021 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 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
jmsippl0 Posted March 7, 2021 Author Share Posted March 7, 2021 @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. Link to comment
tuanphan Posted March 15, 2021 Share Posted March 15, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment