Profile Picture
Julian Galluzzo

Animated FAQ Accordions

A custom FAQ section with all the expected behavior - click to open, click to close, and only allowing one to be open at a time. This FAQ accordion uses a simple and robust script to make the animations happen.
Copy component
Download JSON
{"content":[{"id":"kzdaam","name":"section","parent":0,"children":["pzbily","djcazy"],"settings":{"_padding":{"bottom":"100","top":"100","left":"5%","right":"5%"}},"label":"FAQ Section"},{"id":"pzbily","name":"container","parent":"kzdaam","children":["ycroop","dtrzxf"],"settings":{}},{"id":"ycroop","name":"block","parent":"pzbily","children":["mtgeec"],"settings":{"_margin":{"bottom":"30"},"_direction":"row","_justifyContent":"space-between"},"label":"Title Wrap"},{"id":"mtgeec","name":"heading","parent":"ycroop","children":[],"settings":{"text":"Frequently Asked Questions","tag":"h2"}},{"id":"dtrzxf","name":"block","parent":"pzbily","children":["hzvypj","tbcfvv","oeoqcn","iqgaxh"],"settings":{"_rowGap":"10"},"label":"FAQs Wrap"},{"id":"hzvypj","name":"block","parent":"dtrzxf","children":["keircu","xwruhb"],"settings":{"_cssGlobalClasses":["inhyqx"]},"label":"FAQ"},{"id":"keircu","name":"block","parent":"hzvypj","children":["ugcxbw","apumgi"],"settings":{"_cssGlobalClasses":["bwxatz"]},"label":"Question"},{"id":"ugcxbw","name":"heading","parent":"keircu","children":[],"settings":{"text":"What's your return policy?","_cssGlobalClasses":["gfppct"]}},{"id":"apumgi","name":"icon","parent":"keircu","children":[],"settings":{"icon":{"library":"themify","icon":"ti-angle-down"},"_cssGlobalClasses":["tszjut"]},"themeStyles":{}},{"id":"xwruhb","name":"block","parent":"hzvypj","children":["itpvno"],"settings":{"_cssGlobalClasses":["pevwno"]},"label":"Answer"},{"id":"itpvno","name":"text-basic","parent":"xwruhb","children":[],"settings":{"_cssGlobalClasses":["rrnpvw"],"text":"Deserunt voluptate tempor consequat amet Lorem eiusmod. Sit anim culpa eu et Lorem sit aute tempor qui elit aliquip eu. Incididunt irure officia magna cillum tempor eu eiusmod commodo dolore incididunt excepteur nulla. Commodo amet incididunt ad laborum id in non ex deserunt mollit ad incididunt. Aute culpa sunt voluptate. Quis irure tempor cillum id nostrud quis ad Lorem dolore ullamco esse sunt. Ullamco nisi adipisicing duis."}},{"id":"tbcfvv","name":"block","parent":"dtrzxf","children":["krdzqe","tanmng"],"settings":{"_cssGlobalClasses":["inhyqx"]},"label":"FAQ"},{"id":"krdzqe","name":"block","parent":"tbcfvv","children":["nfniza","pbmihb"],"settings":{"_cssGlobalClasses":["bwxatz"]},"label":"Question"},{"id":"nfniza","name":"heading","parent":"krdzqe","children":[],"settings":{"text":"What services do you offer?","_cssGlobalClasses":["gfppct"]}},{"id":"pbmihb","name":"icon","parent":"krdzqe","children":[],"settings":{"icon":{"library":"themify","icon":"ti-angle-down"},"_cssGlobalClasses":["tszjut"]},"themeStyles":{}},{"id":"tanmng","name":"block","parent":"tbcfvv","children":["hkqrmq"],"settings":{"_cssGlobalClasses":["pevwno"]},"label":"Answer"},{"id":"hkqrmq","name":"text-basic","parent":"tanmng","children":[],"settings":{"text":"In eiusmod fugiat dolor culpa. Proident laboris adipisicing magna et. In anim labore sunt culpa labore culpa cupidatat commodo tempor dolor eu ipsum excepteur. Nulla sunt ut et quis nulla ut qui. Sit qui ipsum commodo proident ad ad minim aliquip id laboris ea.\n\nExcepteur dolor aliquip labore enim reprehenderit. Amet nisi sint excepteur ex cillum sint velit ut. Duis labore excepteur et cupidatat ipsum ad officia dolore sunt pariatur ea minim aliqua veniam aliqua. Veniam officia voluptate labore ea Lorem aute nulla ex.","_cssGlobalClasses":["rrnpvw"]}},{"id":"oeoqcn","name":"block","parent":"dtrzxf","children":["mrzaie","mlbzwa"],"settings":{"_cssGlobalClasses":["inhyqx"]},"label":"FAQ"},{"id":"mrzaie","name":"block","parent":"oeoqcn","children":["lovsjl","pveray"],"settings":{"_cssGlobalClasses":["bwxatz"]},"label":"Question"},{"id":"lovsjl","name":"heading","parent":"mrzaie","children":[],"settings":{"text":"Can I try before I buy?","_cssGlobalClasses":["gfppct"]}},{"id":"pveray","name":"icon","parent":"mrzaie","children":[],"settings":{"icon":{"library":"themify","icon":"ti-angle-down"},"_cssGlobalClasses":["tszjut"]},"themeStyles":{}},{"id":"mlbzwa","name":"block","parent":"oeoqcn","children":["nisqkk"],"settings":{"_cssGlobalClasses":["pevwno"]},"label":"Answer"},{"id":"nisqkk","name":"text-basic","parent":"mlbzwa","children":[],"settings":{"text":"In eiusmod fugiat dolor culpa. Proident laboris adipisicing magna et. In anim labore sunt culpa labore culpa cupidatat commodo tempor dolor eu ipsum excepteur. Nulla sunt ut et quis nulla ut qui. Sit qui ipsum commodo proident ad ad minim aliquip id laboris ea.\n\nExcepteur dolor aliquip labore enim reprehenderit. Amet nisi sint excepteur ex cillum sint velit ut. Duis labore excepteur et cupidatat ipsum ad officia dolore sunt pariatur ea minim aliqua veniam aliqua. Veniam officia voluptate labore ea Lorem aute nulla ex.","_cssGlobalClasses":["rrnpvw"]}},{"id":"iqgaxh","name":"block","parent":"dtrzxf","children":["cjlpoh","rgcxtd"],"settings":{"_cssGlobalClasses":["inhyqx"]},"label":"FAQ"},{"id":"cjlpoh","name":"block","parent":"iqgaxh","children":["kgbenw","sgzwvc"],"settings":{"_cssGlobalClasses":["bwxatz"]},"label":"Question"},{"id":"kgbenw","name":"heading","parent":"cjlpoh","children":[],"settings":{"text":"How long have you been in business?","_cssGlobalClasses":["gfppct"]}},{"id":"sgzwvc","name":"icon","parent":"cjlpoh","children":[],"settings":{"icon":{"library":"themify","icon":"ti-angle-down"},"_cssGlobalClasses":["tszjut"]},"themeStyles":{}},{"id":"rgcxtd","name":"block","parent":"iqgaxh","children":["hgwjvr"],"settings":{"_cssGlobalClasses":["pevwno"]},"label":"Answer"},{"id":"hgwjvr","name":"text-basic","parent":"rgcxtd","children":[],"settings":{"text":"In eiusmod fugiat dolor culpa. Proident laboris adipisicing magna et. In anim labore sunt culpa labore culpa cupidatat commodo tempor dolor eu ipsum excepteur. Nulla sunt ut et quis nulla ut qui. Sit qui ipsum commodo proident ad ad minim aliquip id laboris ea.\n\nExcepteur dolor aliquip labore enim reprehenderit. Amet nisi sint excepteur ex cillum sint velit ut. Duis labore excepteur et cupidatat ipsum ad officia dolore sunt pariatur ea minim aliqua veniam aliqua. Veniam officia voluptate labore ea Lorem aute nulla ex.","_cssGlobalClasses":["rrnpvw"]}},{"id":"djcazy","name":"code","parent":"kzdaam","children":[],"settings":{"javascriptCode":"document.addEventListener('DOMContentLoaded', () => {\n document.querySelectorAll('.faq__question').forEach(question => {\n question.addEventListener('click', () => {\n const answer = question.nextElementSibling;\n const isOpen = answer.hasAttribute('data-open');\n\n // Close all open FAQs\n document.querySelectorAll('.faq__answer[data-open]').forEach(ans => {\n ans.style.maxHeight = '0px';\n ans.style.opacity = '0';\n ans.removeAttribute('data-open');\n ans.previousElementSibling.removeAttribute('data-open'); // Remove from question\n });\n\n // If the clicked one wasn't already open, open it\n if (!isOpen) {\n answer.style.maxHeight = answer.scrollHeight + 'px';\n answer.style.opacity = '1';\n answer.setAttribute('data-open', '');\n question.setAttribute('data-open', ''); // Add data-open to question\n }\n });\n });\n});\n","executeCode":true,"cssCode":".faq__answer {\n max-height: 0;\n opacity: 0;\n overflow: hidden;\n transition: max-height 0.3s ease-out, opacity 0.3s ease-out;\n}\n\n.faq__answer[data-open] {\n opacity: 1;\n}\n\n.faq__icon {\n transition: transform 0.3s ease-out;\n}\n\n.faq__question[data-open] .faq__icon {\n transform: rotate(-90deg);\n}"}}],"source":"bricksCopiedElements","sourceUrl":"https://postpilot.local","version":"1.12.1","globalClasses":[{"id":"inhyqx","name":"faq","settings":{"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"hex":"#e6e6e6"},"radius":{"top":"10","right":"10","bottom":"10","left":"10"}}}},{"id":"bwxatz","name":"faq__question","settings":{"_direction":"row","_justifyContent":"space-between","_alignItems":"center","_padding":{"bottom":"15","top":"15","left":"15","right":"15"},"_cursor":"pointer"}},{"id":"gfppct","name":"faq__question-text","settings":{"_typography":{"font-weight":"500","font-size":"20"}}},{"id":"tszjut","name":"faq__icon","settings":{"iconSize":"20"}},{"id":"pevwno","name":"faq__answer","settings":{"_cssCustom":".faq__answer[data-open] {\n max-height: 500px;\n}\n\n.faq__answer {\n transition: max-height 0.3s ease-out;\n}","_overflow":"hidden","_cssTransition":"all 200ms ease","_heightMax":"0px"}},{"id":"rrnpvw","name":"faq__answer-text","settings":{"_margin":{"left":"20","right":"20","bottom":"20"}}}],"globalElements":[]}

Our notes on this component

Building a custom accordion with Bricks Builder is no easy task – but with this custom accordion component, you’ll have a perfect starting point in just a few seconds.

This component comes pre-loaded with the following animations;

  • Open accordion on click
  • Close accordion on second click
  • Close all other accordions when one is opened

Along with that, all animations have a nice smooth ease on them – so, it’s got everything you’d need and expect from a modern, animated FAQ section!

Note: This component DOES NOT use the Bricks’ native accordion.

Similar components

Profile Picture
Joe Warren

FAQ Accordion

FAQ accordion with custom plus/minus icon
View now
Copy now
{"content":[{"id":"lthtda","name":"section","parent":0,"children":["jneunp"],"settings":{"_cssGlobalClasses":["qbqcae"]}},{"id":"jneunp","name":"container","parent":"lthtda","children":["mjaznb","jauqwc"],"settings":[]},{"id":"mjaznb","name":"block","parent":"jneunp","children":["dbvkzd"],"settings":{"_cssGlobalClasses":["kvsmee"]},"label":"Heading Wrap"},{"id":"dbvkzd","name":"heading","parent":"mjaznb","children":[],"settings":{"text":"Frequently asked questions","_cssGlobalClasses":["nqfpij"],"tag":"h2"}},{"id":"jauqwc","name":"accordion-nested","parent":"jneunp","children":["apkvlm","kzexza","imzggj","jewypt"],"settings":{"titleHeight":"50px","contentPadding":{"top":15,"right":0,"bottom":15,"left":0},"_cssGlobalClasses":["rzdkvf"]},"themeStyles":{}},{"id":"apkvlm","name":"block","parent":"jauqwc","children":["foxggl","dskhdu"],"settings":{"_cssGlobalClasses":["lidkoy"]},"label":"Item"},{"id":"foxggl","name":"block","parent":"apkvlm","children":["vpxkgz","upxbpn"],"settings":{"_alignItems":"center","_direction":"row","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["uexrmv"]},"label":"Title"},{"id":"vpxkgz","name":"block","parent":"foxggl","children":["rfajmz","effkfy"],"settings":{"_cssGlobalClasses":["okubkh"]},"label":"Icon Wrap"},{"id":"rfajmz","name":"block","parent":"vpxkgz","children":[],"settings":{"_cssGlobalClasses":["zfsovd"]},"label":"Line Across"},{"id":"effkfy","name":"block","parent":"vpxkgz","children":[],"settings":{"_cssGlobalClasses":["vlommm"]},"label":"Line Up"},{"id":"upxbpn","name":"heading","parent":"foxggl","children":[],"settings":{"text":"What is hydration therapy?","tag":"h3","_cssGlobalClasses":["jsmdej"]}},{"id":"dskhdu","name":"block","parent":"apkvlm","children":["yfvcbr"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["waprfa"]},"label":"Content"},{"id":"yfvcbr","name":"text","parent":"dskhdu","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"kzexza","name":"block","parent":"jauqwc","children":["jitozn","oljqma"],"settings":{"_cssGlobalClasses":["lidkoy"]},"label":"Item"},{"id":"jitozn","name":"block","parent":"kzexza","children":["ugqjnl","cvwjrb"],"settings":{"_alignItems":"center","_direction":"row","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["uexrmv"]},"label":"Title"},{"id":"ugqjnl","name":"block","parent":"jitozn","children":["cnpfws","fwbduj"],"settings":{"_cssGlobalClasses":["okubkh"]},"label":"Icon Wrap"},{"id":"cnpfws","name":"block","parent":"ugqjnl","children":[],"settings":{"_cssGlobalClasses":["zfsovd"]},"label":"Line Across"},{"id":"fwbduj","name":"block","parent":"ugqjnl","children":[],"settings":{"_cssGlobalClasses":["vlommm"]},"label":"Line Up"},{"id":"cvwjrb","name":"heading","parent":"jitozn","children":[],"settings":{"text":"Is hydration therapy suitable for all skin types?","tag":"h3","_cssGlobalClasses":["jsmdej"]}},{"id":"oljqma","name":"block","parent":"kzexza","children":["debiyh"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["waprfa"]},"label":"Content"},{"id":"debiyh","name":"text","parent":"oljqma","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"imzggj","name":"block","parent":"jauqwc","children":["smpzna","sbzvnh"],"settings":{"_cssGlobalClasses":["lidkoy"]},"label":"Item"},{"id":"smpzna","name":"block","parent":"imzggj","children":["ygnpvq","hefixl"],"settings":{"_alignItems":"center","_direction":"row","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["uexrmv"]},"label":"Title"},{"id":"ygnpvq","name":"block","parent":"smpzna","children":["vylkmk","bhbwiu"],"settings":{"_cssGlobalClasses":["okubkh"]},"label":"Icon Wrap"},{"id":"vylkmk","name":"block","parent":"ygnpvq","children":[],"settings":{"_cssGlobalClasses":["zfsovd"]},"label":"Line Across"},{"id":"bhbwiu","name":"block","parent":"ygnpvq","children":[],"settings":{"_cssGlobalClasses":["vlommm"]},"label":"Line Up"},{"id":"hefixl","name":"heading","parent":"smpzna","children":[],"settings":{"text":"How long does the treatment take?","tag":"h3","_cssGlobalClasses":["jsmdej"],"_typography":{"text-align":"left"}}},{"id":"sbzvnh","name":"block","parent":"imzggj","children":["eaqlxa"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["waprfa"]},"label":"Content"},{"id":"eaqlxa","name":"text","parent":"sbzvnh","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"jewypt","name":"block","parent":"jauqwc","children":["oytsly","rqhxop"],"settings":{"_cssGlobalClasses":["lidkoy"]},"label":"Item"},{"id":"oytsly","name":"block","parent":"jewypt","children":["jsqekk","qdecce"],"settings":{"_alignItems":"center","_direction":"row","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["uexrmv"]},"label":"Title"},{"id":"jsqekk","name":"block","parent":"oytsly","children":["wfueci","edsfen"],"settings":{"_cssGlobalClasses":["okubkh"]},"label":"Icon Wrap"},{"id":"wfueci","name":"block","parent":"jsqekk","children":[],"settings":{"_cssGlobalClasses":["zfsovd"]},"label":"Line Across"},{"id":"edsfen","name":"block","parent":"jsqekk","children":[],"settings":{"_cssGlobalClasses":["vlommm"]},"label":"Line Up"},{"id":"qdecce","name":"heading","parent":"oytsly","children":[],"settings":{"text":"What results can I expect?","tag":"h3","_cssGlobalClasses":["jsmdej"]}},{"id":"rqhxop","name":"block","parent":"jewypt","children":["ldswjl"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["waprfa"]},"label":"Content"},{"id":"ldswjl","name":"text","parent":"rqhxop","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}}],"source":"bricksCopiedElements","sourceUrl":"https://darkturquoise-cormorant-212243.hostingersite.com","version":"1.12.3","globalClasses":[{"id":"qbqcae","name":"section-padding-large","settings":{"_padding":{"top":"100","bottom":"100"},"_background":{"color":{"hex":"#fff9f6","id":"rmkfeg","name":"Color #3"}}}},{"id":"kvsmee","name":"heading-block","settings":{"_alignItems":"center","_rowGap":"16","_margin":{"left":"auto","right":"auto","bottom":"70"},"_width:tablet_portrait":"75%","_width:mobile_landscape":"100%"}},{"id":"nqfpij","name":"h2","settings":{"_typography":{"color":{"hex":"#2e2f34","id":"rzwavb","name":"Color #4"},"font-size":"36","font-weight":"800","text-align":"center"},"_typography:mobile_portrait":{"font-size":"30"},"_typography:tablet_portrait":{"font-size":"36"}},"modified":1744569912,"user_id":1,"_exists":false},{"id":"rzdkvf","name":"accordian","settings":{"_display:mobile_landscape":"flex","_flexDirection:mobile_landscape":"column","_gap:mobile_landscape":"30","_display":"flex","_flexDirection":"column","_gap":"30"}},{"id":"lidkoy","name":"accoridan__item","settings":{"_background":{"color":{"hex":"#fee0d9","id":"keotxb","name":"Color #6"}},"_justifyContent":"center","_border":{"radius":{"right":"100"}},"_padding":{"bottom":"30","top":"30","left":"40","right":"40"},"_cssCustom":".accoridan__item .accordian__line-vertical {\n transition: all 0.2s ease-in-out; \n}\n\n.accoridan__item.brx-open .accordian__line-vertical {\n transform: rotate(90deg);\n}","_padding:mobile_landscape":{"left":"20","right":"20","top":"20","bottom":"20"},"_border:mobile_landscape":{"radius":{"right":"50"}}},"modified":1748435884,"user_id":1},{"id":"uexrmv","name":"accordian__title","settings":{"_columnGap":"32","_flexWrap:mobile_landscape":"nowrap"}},{"id":"okubkh","name":"accordian__icon-wrap","settings":{"_width":"16","_height":"16","_display":"flex","_justifyContent":"center","_position":"relative","_alignItems":"center"}},{"id":"zfsovd","name":"accordian__line-across","settings":{"_height":"1","_background":{"color":{"hex":"#512729","id":"edrsok","name":"Color #1"}},"_position":"absolute"}},{"id":"vlommm","name":"accordian__line-vertical","settings":{"_width":"1","_background":{"color":{"hex":"#512729","id":"edrsok","name":"Color #1"}},"_position":"absolute","_height":"100%"}},{"id":"jsmdej","name":"accoridan__heading","settings":{"_typography":{"color":{"hex":"#512729","id":"edrsok","name":"Color #1"}},"_typography:mobile_landscape":{"font-size":"24"},"_typography:mobile_portrait":{"font-size":"20"}}},{"id":"waprfa","name":"accordian__content","settings":[]}],"globalElements":[]}
Profile Picture
Julian Galluzzo

Beige FAQs Section

Animated accordions made to be FAQs - from our 2025 Online Course Template!
View now
Copy now
{"content":[{"id":"efqojk","name":"section","parent":0,"children":["sxocir"],"settings":{"_cssCustom":"#brxe-efqojk {\n scroll-margin-top: 100px;\n}"},"label":"FAQs"},{"id":"sxocir","name":"container","parent":"efqojk","children":["uqrpti","nmzapt"],"settings":[]},{"id":"uqrpti","name":"block","parent":"sxocir","children":["nqalri","evckgc","unvmrw"],"settings":{"_cssGlobalClasses":["uvrubm"]},"label":"Content Wrap"},{"id":"nqalri","name":"text-basic","parent":"uqrpti","children":[],"settings":{"text":"FAQs","_cssGlobalClasses":["yvvyfb"]},"label":"Subheading"},{"id":"evckgc","name":"heading","parent":"uqrpti","children":[],"settings":{"text":"Frequently Asked Questions","_margin":{"bottom":"20"},"tag":"h2"}},{"id":"unvmrw","name":"text-basic","parent":"uqrpti","children":[],"settings":{"text":"If there's anything you're still wondering, chances are, we've answered it here!","_typography":{"font-size":"20"},"_widthMax":"800"}},{"id":"nmzapt","name":"accordion-nested","parent":"sxocir","children":["fqfdsw"],"settings":{"titleHeight":"50px","_cssGlobalClasses":["uhrbom"]},"label":"FAQ","themeStyles":[]},{"id":"fqfdsw","name":"block","parent":"nmzapt","children":["pgksiv","bbqllh","pfsyck","lpdssd","xiotgk","wzjxcv"],"settings":{"_cssGlobalClasses":["urtxqt"]}},{"id":"pgksiv","name":"block","parent":"fqfdsw","children":["ejpuyz","yudzsz"],"settings":{"_cssGlobalClasses":["jkcnrq"]},"label":"Item"},{"id":"ejpuyz","name":"block","parent":"pgksiv","children":["lmtzsm","dbedii"],"settings":{"_cssGlobalClasses":["dvrjmv"],"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"lmtzsm","name":"heading","parent":"ejpuyz","children":[],"settings":{"_cssGlobalClasses":["djrcpe"],"text":"What if I don't get a job?","tag":"h3"}},{"id":"dbedii","name":"icon","parent":"ejpuyz","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em"}},{"id":"yudzsz","name":"block","parent":"pgksiv","children":["zgvagj"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["trxgan"]},"label":"Content"},{"id":"zgvagj","name":"text","parent":"yudzsz","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"bbqllh","name":"block","parent":"fqfdsw","children":["dzqavb","mtnnyl"],"settings":{"_cssGlobalClasses":["jkcnrq"]},"label":"Item"},{"id":"dzqavb","name":"block","parent":"bbqllh","children":["mmyxpj","lgesbz"],"settings":{"_cssGlobalClasses":["dvrjmv"],"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"mmyxpj","name":"heading","parent":"dzqavb","children":[],"settings":{"_cssGlobalClasses":["djrcpe"],"text":"Do you offer any discount codes?","tag":"h3"}},{"id":"lgesbz","name":"icon","parent":"dzqavb","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em"}},{"id":"mtnnyl","name":"block","parent":"bbqllh","children":["hwxhua"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["trxgan"]},"label":"Content"},{"id":"hwxhua","name":"text","parent":"mtnnyl","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"pfsyck","name":"block","parent":"fqfdsw","children":["jiuulz","xmmbsg"],"settings":{"_cssGlobalClasses":["jkcnrq"]},"label":"Item"},{"id":"jiuulz","name":"block","parent":"pfsyck","children":["xenpdj","krwsud"],"settings":{"_cssGlobalClasses":["dvrjmv"],"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"xenpdj","name":"heading","parent":"jiuulz","children":[],"settings":{"_cssGlobalClasses":["djrcpe"],"text":"What are your guarantees?","tag":"h3"}},{"id":"krwsud","name":"icon","parent":"jiuulz","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em"}},{"id":"xmmbsg","name":"block","parent":"pfsyck","children":["roawti"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["trxgan"]},"label":"Content"},{"id":"roawti","name":"text","parent":"xmmbsg","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"lpdssd","name":"block","parent":"fqfdsw","children":["ogymcn","bcwiwc"],"settings":{"_cssGlobalClasses":["jkcnrq"]},"label":"Item"},{"id":"ogymcn","name":"block","parent":"lpdssd","children":["hhzhvr","okagpf"],"settings":{"_cssGlobalClasses":["dvrjmv"],"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"hhzhvr","name":"heading","parent":"ogymcn","children":[],"settings":{"_cssGlobalClasses":["djrcpe"],"text":"What is included in the price of the course?","tag":"h3"}},{"id":"okagpf","name":"icon","parent":"ogymcn","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em"}},{"id":"bcwiwc","name":"block","parent":"lpdssd","children":["pqguum"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["trxgan"]},"label":"Content"},{"id":"pqguum","name":"text","parent":"bcwiwc","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"xiotgk","name":"block","parent":"fqfdsw","children":["qgppvf","iyngfi"],"settings":{"_cssGlobalClasses":["jkcnrq"]},"label":"Item"},{"id":"qgppvf","name":"block","parent":"xiotgk","children":["fgvnwx","gkzbwg"],"settings":{"_cssGlobalClasses":["dvrjmv"],"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"fgvnwx","name":"heading","parent":"qgppvf","children":[],"settings":{"_cssGlobalClasses":["djrcpe"],"text":"Do you offer 1-on-1 tutoring?","tag":"h3"}},{"id":"gkzbwg","name":"icon","parent":"qgppvf","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em"}},{"id":"iyngfi","name":"block","parent":"xiotgk","children":["ufbyyi"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["trxgan"]},"label":"Content"},{"id":"ufbyyi","name":"text","parent":"iyngfi","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}},{"id":"wzjxcv","name":"block","parent":"fqfdsw","children":["rtsjna","wgegoo"],"settings":{"_cssGlobalClasses":["jkcnrq"]},"label":"Item"},{"id":"rtsjna","name":"block","parent":"wzjxcv","children":["qnuces","xyrykh"],"settings":{"_cssGlobalClasses":["dvrjmv"],"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"}},"label":"Title"},{"id":"qnuces","name":"heading","parent":"rtsjna","children":[],"settings":{"_cssGlobalClasses":["djrcpe"],"text":"How long will the course take to complete?","tag":"h3"}},{"id":"xyrykh","name":"icon","parent":"rtsjna","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em"}},{"id":"wgegoo","name":"block","parent":"wzjxcv","children":["tqofhf"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["trxgan"]},"label":"Content"},{"id":"tqofhf","name":"text","parent":"wgegoo","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem."}}],"source":"bricksCopiedElements","sourceUrl":"https://online-course-template.local","version":"1.12.4","globalClasses":[{"id":"uvrubm","name":"hero__content-wrap","settings":{"_alignItems":"center","_typography":{"text-align":"center"},"_margin":{"bottom":"75"}}},{"id":"yvvyfb","name":"subheading","settings":{"_typography":{"color":{"hex":"#f44336"},"font-weight":"600"},"_background":{"color":{"hex":"#f44336","rgb":"rgba(244, 67, 54, 0.1)","hsl":"hsla(4, 90%, 58%, 0.1)"}},"_padding":{"bottom":"3","top":"3","left":"12","right":"12"},"_margin":{"bottom":"20"},"_border":{"radius":{"top":"50","right":"50","bottom":"50","left":"50"}}},"modified":1745409256,"user_id":1},{"id":"uhrbom","name":"faq","settings":[]},{"id":"urtxqt","name":"faq__block","settings":{"_columnGap":"15","_rowGap":"15"}},{"id":"jkcnrq","name":"faq__item","settings":{"_background":{"color":{"hex":"#ffffff"}},"_border":{"width":{"bottom":"1","top":"1","left":"1","right":"1"},"style":"solid","color":{"raw":"var(--border-base)"},"radius":{"right":"20","top":"20","bottom":"20","left":"20"}},"_boxShadow":{"values":{"offsetY":"5","blur":"0"},"color":{"raw":"var(--shadow-fake)"}}}},{"id":"dvrjmv","name":"faq__title","settings":{"_padding":{"left":"30","right":"30","top":"20","bottom":"20"},"_flexWrap:mobile_portrait":"nowrap","_columnGap:mobile_portrait":"15"}},{"id":"djrcpe","name":"faq__heading","settings":{"_typography:mobile_portrait":{"font-size":"20"},"_typography":{"font-weight":"600"}},"modified":1745230098,"user_id":1},{"id":"trxgan","name":"faq__content","settings":{"_padding":{"bottom":"20","left":"30","right":"30"}}}],"globalElements":[]}
Profile Picture
Julian Galluzzo

InvestKit FAQs Section

A dark mode FAQs section with native Bricks Builder accordions!
View now
Copy now
{"content":[{"id":"xurumx","name":"section","parent":0,"children":["agihxx"],"settings":{"_cssGlobalClasses":["upnjxa"]},"label":"FAQ"},{"id":"agihxx","name":"container","parent":"xurumx","children":["bjkhfe","dserab"],"settings":[]},{"id":"bjkhfe","name":"block","parent":"agihxx","children":["jvingc","bkidri","tvpqxm"],"settings":{"_cssGlobalClasses":["fgspxo"]},"label":"Header Wrap"},{"id":"jvingc","name":"icon","parent":"bjkhfe","children":[],"settings":{"icon":{"library":"svg","svg":{"id":32,"filename":"Group-54.svg","url":"https://investkit-ui.local/wp-content/uploads/2025/03/Group-54.svg"},"height":"30","width":"30"},"_cssGlobalClasses":["shswkx"]},"themeStyles":[]},{"id":"bkidri","name":"heading","parent":"bjkhfe","children":[],"settings":{"text":"FAQs","tag":"h2","_cssGlobalClasses":["nvamro"],"_margin":{"bottom":"15"}}},{"id":"tvpqxm","name":"text-basic","parent":"bjkhfe","children":[],"settings":{"text":"Get started for free with no contracts, trials, or hidden fees—no strings attached.","_cssGlobalClasses":["fjolnv"],"_widthMax":"450"},"label":"Paragraph"},{"id":"dserab","name":"accordion-nested","parent":"agihxx","children":["boakcs"],"settings":{"titleHeight":"50px","_cssGlobalClasses":["oowwgt"]}},{"id":"boakcs","name":"block","parent":"dserab","children":["bhaawx","xwhbep","szlfaq","ytxfjj","ruzgke"],"settings":{"_cssGlobalClasses":["rgzodb"]},"label":"Wrap"},{"id":"bhaawx","name":"block","parent":"boakcs","children":["iicrci","frosia"],"settings":{"_cssGlobalClasses":["uhyitc"]},"label":"Item"},{"id":"iicrci","name":"block","parent":"bhaawx","children":["fpzadi","kavdjd"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["hatdqy"]},"label":"Title"},{"id":"fpzadi","name":"heading","parent":"iicrci","children":[],"settings":{"text":"How do I change my password?","tag":"h3","_cssGlobalClasses":["lctyvr"]}},{"id":"kavdjd","name":"icon","parent":"iicrci","children":[],"settings":{"icon":{"library":"themify","icon":"ti-plus"},"iconSize":"1em"}},{"id":"frosia","name":"block","parent":"bhaawx","children":["xkubmq"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["ywqxoz"]},"label":"Content"},{"id":"xkubmq","name":"text","parent":"frosia","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fjolnv"]}},{"id":"xwhbep","name":"block","parent":"boakcs","children":["hvrcwf","jskgxs"],"settings":{"_cssGlobalClasses":["uhyitc"]},"label":"Item"},{"id":"hvrcwf","name":"block","parent":"xwhbep","children":["ypiayx","rklcry"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["hatdqy"]},"label":"Title"},{"id":"ypiayx","name":"heading","parent":"hvrcwf","children":[],"settings":{"text":"When will I receive my changed ATM PIN?","tag":"h3","_cssGlobalClasses":["lctyvr"]}},{"id":"rklcry","name":"icon","parent":"hvrcwf","children":[],"settings":{"icon":{"library":"themify","icon":"ti-plus"},"iconSize":"1em"}},{"id":"jskgxs","name":"block","parent":"xwhbep","children":["wrddwq"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["ywqxoz"]},"label":"Content"},{"id":"wrddwq","name":"text","parent":"jskgxs","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fjolnv"]}},{"id":"szlfaq","name":"block","parent":"boakcs","children":["xrdtbd","nzyiwl"],"settings":{"_cssGlobalClasses":["uhyitc"]},"label":"Item"},{"id":"xrdtbd","name":"block","parent":"szlfaq","children":["rikkgf","umppgr"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["hatdqy"]},"label":"Title"},{"id":"rikkgf","name":"heading","parent":"xrdtbd","children":[],"settings":{"text":"Can chip credit cards be used anywhere?","tag":"h3","_cssGlobalClasses":["lctyvr"]}},{"id":"umppgr","name":"icon","parent":"xrdtbd","children":[],"settings":{"icon":{"library":"themify","icon":"ti-plus"},"iconSize":"1em"}},{"id":"nzyiwl","name":"block","parent":"szlfaq","children":["oxldmx"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["ywqxoz"]},"label":"Content"},{"id":"oxldmx","name":"text","parent":"nzyiwl","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fjolnv"]}},{"id":"ytxfjj","name":"block","parent":"boakcs","children":["brvqpd","jqahjp"],"settings":{"_cssGlobalClasses":["uhyitc"]},"label":"Item"},{"id":"brvqpd","name":"block","parent":"ytxfjj","children":["mxvgkh","istoph"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["hatdqy"]},"label":"Title"},{"id":"mxvgkh","name":"heading","parent":"brvqpd","children":[],"settings":{"text":"Can I make a deposit by mail?","tag":"h3","_cssGlobalClasses":["lctyvr"]}},{"id":"istoph","name":"icon","parent":"brvqpd","children":[],"settings":{"icon":{"library":"themify","icon":"ti-plus"},"iconSize":"1em"}},{"id":"jqahjp","name":"block","parent":"ytxfjj","children":["elomdy"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["ywqxoz"]},"label":"Content"},{"id":"elomdy","name":"text","parent":"jqahjp","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fjolnv"]}},{"id":"ruzgke","name":"block","parent":"boakcs","children":["frvqog","epxwcl"],"settings":{"_cssGlobalClasses":["uhyitc"]},"label":"Item"},{"id":"frvqog","name":"block","parent":"ruzgke","children":["jxeege","wetsrn"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["hatdqy"]},"label":"Title"},{"id":"jxeege","name":"heading","parent":"frvqog","children":[],"settings":{"text":"How do I activate my debit card?","tag":"h3","_cssGlobalClasses":["lctyvr"]}},{"id":"wetsrn","name":"icon","parent":"frvqog","children":[],"settings":{"icon":{"library":"themify","icon":"ti-plus"},"iconSize":"1em"}},{"id":"epxwcl","name":"block","parent":"ruzgke","children":["bdcmnx"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["ywqxoz"]},"label":"Content"},{"id":"bdcmnx","name":"text","parent":"epxwcl","children":[],"settings":{"text":"Lorem ipsum dolor ist amte, consectetuer adipiscing eilt. Aenean commodo ligula egget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quak felis, ultricies nec, pellentesque eu, pretium quid, sem.","_cssGlobalClasses":["fjolnv"]}}],"source":"bricksCopiedElements","sourceUrl":"https://investkit-ui.local","version":"1.12.3","globalClasses":[{"id":"upnjxa","name":"section-default","settings":{"_background":{"color":{"hex":"#153236","id":"owxrer","name":"Color #1"}},"_typography":{"color":{"hex":"#ffffff","id":"xtezot","name":"Color #2"},"font-family":"Inter"},"_padding":{"bottom":"75","top":"75","left":"5%","right":"5%"}}},{"id":"fgspxo","name":"header-wrap--center","settings":{"_widthMax":"600","_alignSelf":"center","_justifyContent":"center","_alignItems":"center","_typography":{"text-align":"center"},"_margin":{"bottom":"50"}}},{"id":"shswkx","name":"swirl-icon","settings":{"_margin":{"bottom":"20"},"iconSize":"30"}},{"id":"nvamro","name":"h2","settings":{"_typography":{"font-family":"Bricolage Grotesque","font-size":"45","line-height":"50px","font-weight":"700"},"_typography:mobile_portrait":{"font-size":"40","line-height":"45px"}}},{"id":"fjolnv","name":"paragraph","settings":{"_opacity":"0.7"}},{"id":"oowwgt","name":"faq__accordion","settings":{"_widthMax":"900","_margin":{"left":"auto","right":"auto"}}},{"id":"rgzodb","name":"faq__wrap","settings":{"_rowGap":"15"}},{"id":"uhyitc","name":"faq__item","settings":{"_background":{"color":{"hex":"#1a393e","id":"cvszxc","name":"Color #4"}},"_overflow":"clip","_border":{"radius":{"top":"7","right":"7","bottom":"7","left":"7"}}}},{"id":"hatdqy","name":"faq__title","settings":{"_padding":{"bottom":"20","top":"20","left":"20","right":"20"}}},{"id":"lctyvr","name":"faq__heading","settings":{"_typography":{"font-size":"18","font-family":"Bricolage Grotesque","font-weight":"400"}}},{"id":"ywqxoz","name":"faq__content","settings":{"_padding":{"left":"20","right":"20","top":"0","bottom":"15"}}}],"globalElements":[]}

Categories

Accordions

Nice, you've downloaded this template! Now let's get it on your website...

To use this component, go to your 'Templates', click 'Import', and upload the file you just downloaded! It's that simple. You can then copy/paste it to other sections of your website.
Close & continue

Nice, you've copied this component! Now let's paste it...

To paste this component, simply go to any Bricks page or component and click paste! Simple as that.
Close & continue