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
{"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
Julian Galluzzo

1 Column FAQ Section

Showcase your most important FAQs with this 1-column layout, utilizing the native Bricks accordions.
View now
Copy now
{"content":[{"id":"frogqe","name":"section","parent":0,"children":["fjrilt","zxmdms"],"settings":{"_cssGlobalClasses":["poonsy"]},"label":"FAQ"},{"id":"fjrilt","name":"container","parent":"frogqe","children":["nubkxg","bvwtke","fkkmdf","dnzsun"],"settings":{"_cssGlobalClasses":["imwoyi","acss_import_gap--none"]}},{"id":"nubkxg","name":"div","parent":"fjrilt","children":["kgckmf","xjiamt"],"settings":{"_cssGlobalClasses":["qioxst"]},"label":"Sectitle"},{"id":"kgckmf","name":"icon","parent":"nubkxg","children":[],"settings":{"icon":{"library":"ionicons","icon":"ion-ios-help-buoy"},"_cssGlobalClasses":["jldrhu"]},"label":"Icon","themeStyles":[]},{"id":"xjiamt","name":"text-basic","parent":"nubkxg","children":[],"settings":{"text":"FAQs"},"label":"Text"},{"id":"bvwtke","name":"heading","parent":"fjrilt","children":[],"settings":{"_cssGlobalClasses":["acss_import_h2"],"tag":"h2","text":"Frequently Asked Questions"}},{"id":"fkkmdf","name":"text-basic","parent":"fjrilt","children":[],"settings":{"text":"Something we missed on this page? Hopefully, we've got you covered here. If not, feel free to join our Slack community and ask away!","_cssGlobalClasses":["acss_import_text--m","acss_import_text--neutral-semi-dark"],"_margin":{"bottom":"20"}},"label":"Paragraph"},{"id":"dnzsun","name":"block","parent":"fjrilt","children":["cphnbb","sfqjae"],"settings":{"_cssGlobalClasses":["gicirs"]}},{"id":"cphnbb","name":"button","parent":"dnzsun","children":[],"settings":{"text":"Get started for free","style":"primary","_cssGlobalClasses":["grgqgk"],"tag":"a","link":{"type":"external","url":"https://wordpress.org/plugins/memberstack/"}}},{"id":"sfqjae","name":"button","parent":"dnzsun","children":[],"settings":{"text":"Join the Slack community","style":"secondary","_cssGlobalClasses":["grgqgk","qgmohn"],"tag":"a","link":{"type":"external","url":"https://www.memberstack.com/wpslack","newTab":true}}},{"id":"zxmdms","name":"container","parent":"frogqe","children":["pmkitp"],"settings":[]},{"id":"pmkitp","name":"accordion-nested","parent":"zxmdms","children":["ezjwfa"],"settings":{"titleHeight":"50px","contentPadding":{"top":15,"right":0,"bottom":15,"left":0},"_cssGlobalClasses":["xad72d"]},"label":"Accordions","themeStyles":[]},{"id":"ezjwfa","name":"block","parent":"pmkitp","children":["xgdaiw","jrjzem","ovpvzc","isnpsd","nxjlcb","jxfhtj","lcqevp","egekdw"],"settings":{"_cssGlobalClasses":["ndvnyw"]},"label":"Wrap"},{"id":"xgdaiw","name":"block","parent":"ezjwfa","children":["nfcanv","hikedj"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"nfcanv","name":"block","parent":"xgdaiw","children":["dqbudi","ixwehb"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"dqbudi","name":"heading","parent":"nfcanv","children":[],"settings":{"text":"What is Memberstack?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"ixwehb","name":"icon","parent":"nfcanv","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon"},{"id":"hikedj","name":"block","parent":"xgdaiw","children":["nppuij"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"nppuij","name":"text","parent":"hikedj","children":[],"settings":{"text":"Think of Memberstack as your all-in-one membership toolkit. We help you create and manage memberships, set up different membership tiers, and control who sees what on your website. Whether you're just starting with a handful of members or running a massive community, we've got you covered with a platform that grows alongside your business.","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"jrjzem","name":"block","parent":"ezjwfa","children":["stzgdr","yiexeb"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"stzgdr","name":"block","parent":"jrjzem","children":["nrqhkz","liztrq"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"nrqhkz","name":"heading","parent":"stzgdr","children":[],"settings":{"text":"How does Memberstack play with WordPress?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"liztrq","name":"icon","parent":"stzgdr","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon"},{"id":"yiexeb","name":"block","parent":"jrjzem","children":["njxqcb"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"njxqcb","name":"text","parent":"yiexeb","children":[],"settings":{"text":"Here's what makes us different: instead of piggybacking on WordPress's user system, we've built our own robust infrastructure. This means your site stays lightning-fast, even as your membership grows. We've made sure everything integrates smoothly with WordPress - from content restrictions to member management - without putting any extra load on your site.","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"ovpvzc","name":"block","parent":"ezjwfa","children":["duofwn","fkaqwc"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"duofwn","name":"block","parent":"ovpvzc","children":["rpmsod","jjnbzc"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"rpmsod","name":"heading","parent":"duofwn","children":[],"settings":{"text":"What can I do with the Memberstack plugin?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"jjnbzc","name":"icon","parent":"duofwn","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon"},{"id":"fkaqwc","name":"block","parent":"ovpvzc","children":["prglrx"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"prglrx","name":"text","parent":"fkaqwc","children":[],"settings":{"text":"Our WordPress plugin comes packed with features that make membership management a breeze:Lock down content based on membership levels - you decide who sees whatShow or hide elements on your pages using simple data attributesCreate personalized content using member dataWorks seamlessly with HTML attributes","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"isnpsd","name":"block","parent":"ezjwfa","children":["glxvgx","abgfor"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"glxvgx","name":"block","parent":"isnpsd","children":["hmccqv","keqqbz"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"hmccqv","name":"heading","parent":"glxvgx","children":[],"settings":{"text":"Do you have a free plan?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"keqqbz","name":"icon","parent":"glxvgx","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon"},{"id":"abgfor","name":"block","parent":"isnpsd","children":["hpqhxs"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"hpqhxs","name":"text","parent":"abgfor","children":[],"settings":{"text":"While we don't offer a free plan for live sites, we do something better: you can build and test your entire membership site without spending a dime. No credit card needed! You only need to subscribe when you're ready to launch. This way, you can make sure everything's perfect before going live.","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"nxjlcb","name":"block","parent":"ezjwfa","children":["xcfphq","flqwyb"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"xcfphq","name":"block","parent":"nxjlcb","children":["csjpdo","jaixhm"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"csjpdo","name":"heading","parent":"xcfphq","children":[],"settings":{"text":"Which page builders work with Memberstack?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"jaixhm","name":"icon","parent":"xcfphq","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon","themeStyles":[]},{"id":"flqwyb","name":"block","parent":"nxjlcb","children":["anenkb"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"anenkb","name":"text","parent":"flqwyb","children":[],"settings":{"text":"We've got built-in support for your favorite page builders:Bricks Builder - the teams preferred way to use WordpressElementor - the most popular page builder for WordPressDivi - fully compatibleGutenberg - WordPress's native editorAnd here's the best part: thanks to our data attribute system, you can use Memberstack with pretty much any page builder out there, or even custom-coded sites. We're flexible like that!","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"jxfhtj","name":"block","parent":"ezjwfa","children":["wblqgi","fgapde"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"wblqgi","name":"block","parent":"jxfhtj","children":["yxxuem","jezaro"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"yxxuem","name":"heading","parent":"wblqgi","children":[],"settings":{"text":"Can Memberstack handle growth?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"jezaro","name":"icon","parent":"wblqgi","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon","themeStyles":[]},{"id":"fgapde","name":"block","parent":"jxfhtj","children":["lvwkga"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"lvwkga","name":"text","parent":"fgapde","children":[],"settings":{"text":"Absolutely! We've spent over 6 years perfecting our platform, and we're proud to power membership sites for organizations like Slack, Reddit, and Stanford. Because we don't rely on WordPress's user system, your site stays speedy even with millions of members. Whether you're starting small or going big, we've got your back.","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"lcqevp","name":"block","parent":"ezjwfa","children":["yqpdwp","iedtln"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"yqpdwp","name":"block","parent":"lcqevp","children":["mpmftl","zgoxgl"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"mpmftl","name":"heading","parent":"yqpdwp","children":[],"settings":{"text":"Is Memberstack just for WordPress?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"zgoxgl","name":"icon","parent":"yqpdwp","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon","themeStyles":[]},{"id":"iedtln","name":"block","parent":"lcqevp","children":["hifwpe"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"hifwpe","name":"text","parent":"iedtln","children":[],"settings":{"text":"Not at all! While WordPress powers nearly half the web (and we love it!), we understand that your tech needs might change as your business grows. That's why we've built Memberstack to work with practically any platform that supports custom data attributes and have DOM package that uses Javascript for advanced customers using Svelte, Vue, or React. Your membership infrastructure stays solid, even if you decide to switch platforms down the road.","_cssGlobalClasses":["shydyl"]},"label":"Text"},{"id":"egekdw","name":"block","parent":"ezjwfa","children":["lakppn","dqsoqo"],"settings":{"_cssGlobalClasses":["90wsuv"]},"label":"Item"},{"id":"lakppn","name":"block","parent":"egekdw","children":["fcobcm","ibcpkl"],"settings":{"_alignItems":"center","_direction":"row","_justifyContent":"space-between","_hidden":{"_cssClasses":"accordion-title-wrapper"},"_cssGlobalClasses":["c4ij7z"]},"label":"Title"},{"id":"fcobcm","name":"heading","parent":"lakppn","children":[],"settings":{"text":"How easy is it to switch to Memberstack?","tag":"h3","_cssGlobalClasses":["ck4hhm"]},"label":"Heading"},{"id":"ibcpkl","name":"icon","parent":"lakppn","children":[],"settings":{"icon":{"icon":"ion-ios-arrow-forward","library":"ionicons"},"iconSize":"1em","_cssGlobalClasses":["bnnkym"]},"label":"Icon","themeStyles":[]},{"id":"dqsoqo","name":"block","parent":"egekdw","children":["agsghc"],"settings":{"_hidden":{"_cssClasses":"accordion-content-wrapper"},"_cssGlobalClasses":["fbygjr"]},"label":"Content"},{"id":"agsghc","name":"text","parent":"dqsoqo","children":[],"settings":{"text":"Moving to Memberstack is straightforward and stress-free:Just export your current members to CSV and import them into Memberstack - simple as that!Using Stripe? We can move your subscriptions over without any hiccupsYour existing members won't notice a thing during the transition","_cssGlobalClasses":["shydyl"]},"label":"Text"}],"source":"bricksCopiedElements","sourceUrl":"https://memberstack.local","version":"1.12.3","globalClasses":[{"id":"poonsy","name":"section-background-top","settings":{"_cssCustom":".section-background-top {\n background-image: radial-gradient(circle, #ffffffed, #fff), url(https://cdn.prod.website-files.com/5bbfaf3252489b4c484ba9b9/67091ff1aeede309de90137f_Group5.svg);\n background-position: 0 0, 0 0;\n background-size: auto, 20px;\n}"}},{"id":"imwoyi","name":"section-title","settings":{"_justifyContent":"center","_alignItems":"center","_rowGap":"15","_typography":{"text-align":"center"},"_widthMax":"700","_widthMax:mobile_landscape":"none","_width:mobile_landscape":"100%"}},{"id":"acss_import_gap--none","name":"gap--none","settings":[],"category":"acss","_categoryData":{"id":"acss","name":"Automatic.css"}},{"id":"qioxst","name":"sectitle","settings":{"_padding":{"bottom":"5","top":"5","left":"12","right":"12"},"_border":{"style":"solid","width":{"bottom":"1","top":"1","left":"1","right":"1"},"color":{"hex":"#dbdbdb"},"radius":{"top":"6","right":"6","bottom":"6","left":"6"}},"_display":"flex","_justifyContent":"center","_alignItems":"center","_columnGap":"10","_rowGap":"10","_typography":{"font-size":"14","font-weight":"600"},"_boxShadow":{"values":{"offsetY":"5","blur":"10"},"color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}},"_margin":{"bottom":"15"},"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}}}},{"id":"jldrhu","name":"sectitle__icon","settings":{"iconSize":"18"}},{"id":"acss_import_h2","name":"h2","settings":{"_cssCustom":".blue {\n color: #2962ff;\n}","_typography":{"font-weight":"800","font-size":"40"},"_typography:mobile_portrait":{"font-size":"30"}},"category":"acss","_categoryData":{"id":"acss","name":"Automatic.css"}},{"id":"acss_import_text--m","name":"text--m","settings":[],"category":"acss","_categoryData":{"id":"acss","name":"Automatic.css"}},{"id":"acss_import_text--neutral-semi-dark","name":"text--neutral-semi-dark","settings":[],"category":"acss","_categoryData":{"id":"acss","name":"Automatic.css"}},{"id":"gicirs","name":"button-group","settings":{"_direction":"row","_justifyContent":"center","_alignItems":"center","_columnGap":"15","_rowGap":"15"}},{"id":"grgqgk","name":"button","settings":{"_padding":{"bottom":"12","top":"12","left":"22","right":"22"},"_cssCustom":".button {\n box-shadow: \n 0 4px 6px rgba(0, 0, 0, 0.1), /* Outer shadow */\n inset 0 2px 5px rgba(255, 255, 255, 0.3), /* Light inner shadow at the top */\n inset 0 -2px 5px rgba(0, 0, 0, 0.3); /* Dark inner shadow at the bottom */\n}","_background:hover":{"color":{"id":"acss_import_primary-semi-dark","name":"primary-semi-dark","raw":"var(--primary-semi-dark)"}},"_cssTransition":"0.2s","_background":{"color":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"}},"_typography":{"font-weight":"600","letter-spacing":"-0.5"},"_transform:hover":{"scaleX":"1.05","scaleY":"1.05"}},"modified":1741686006,"user_id":1},{"id":"qgmohn","name":"button--white","settings":{"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}},"_typography":{"color":{"id":"acss_import_black","name":"black","raw":"var(--black)"}},"_background:hover":{"color":{"id":"acss_import_white-trans-90","name":"white-trans-90","raw":"var(--white-trans-90)"}},"_cssCustom":".button--white {\n box-shadow: \n 0 4px 6px rgba(0, 0, 0, 0.1), /* Outer shadow */\n inset 0 2px 5px rgba(255, 255, 255, 0.3), /* Light inner shadow at the top */\n inset 0 -2px 5px rgba(0, 0, 0, 0.1); /* Dark inner shadow at the bottom */\n}","_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}}}},{"id":"xad72d","name":"accordions","settings":[]},{"id":"ndvnyw","name":"accordions__wrap","settings":{"_rowGap":"15","_columnGap":"15"}},{"id":"90wsuv","name":"accordions__item","settings":{"_padding":{"bottom":"10","top":"10","left":"20","right":"20"},"_border":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"raw":"var(--border--base)"},"radius":{"top":"15","right":"15","bottom":"15","left":"15"}},"_boxShadow":{"values":{"offsetY":"5","blur":"10"},"color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}},"_background":{"color":{"id":"acss_import_white","name":"white","raw":"var(--white)"}},"_columnGap":"10","_rowGap":"10","_border:hover":{"width":{"top":"1","right":"1","bottom":"1","left":"1"},"style":"solid","color":{"id":"acss_import_primary","name":"primary","raw":"var(--primary)"}},"_cssTransition":"0.2s"}},{"id":"c4ij7z","name":"accordions__title","settings":{"_flexWrap:mobile_portrait":"nowrap"},"modified":1741689462,"user_id":1},{"id":"ck4hhm","name":"accordions__heading","settings":{"_typography":{"font-weight":"700","font-size":"22"},"_cssCustom":".accordions__heading {\n -webkit-touch-callout: none; /* iOS Safari */\n -webkit-user-select: none; /* Safari */\n -khtml-user-select: none; /* Konqueror HTML */\n -moz-user-select: none; /* Old versions of Firefox */\n -ms-user-select: none; /* Internet Explorer/Edge */\n user-select: none; /* Non-prefixed version, currently\n supported by Chrome, Edge, Opera and Firefox */\n}","_typography:mobile_portrait":{"font-size":"16"}},"modified":1741689462,"user_id":1},{"id":"bnnkym","name":"accordions__icon","settings":[]},{"id":"fbygjr","name":"accordions__content","settings":{"_border":{"width":{"top":"1"},"style":"solid","color":{"id":"acss_import_black-trans-10","name":"black-trans-10","raw":"var(--black-trans-10)"}}}},{"id":"shydyl","name":"accordions__text","settings":{"_typography":{"color":{"id":"acss_import_black-trans-70","name":"black-trans-70","raw":"var(--black-trans-70)"},"font-size":"16"}},"modified":1741683476,"user_id":1}],"globalElements":[]}

Categories

Accordions