Hello @julia.altitude,
I’ve tried twice in the past but without success. I guess you’ll need a lot custom JS to make it happen.
Instead I’m using the Lightbox to make FAQ. With a nice design it will do the job !
Hi @julia.altitude,
I used this FAQ accordion before: https://pricing.unbounce.com (at the very bottom). Let me know if that helps and I’ll copy & paste the code for you.
Hello @athorburnwatt
It will be very helpful if you can have the code of this FAQ 🙂
Hey everyone,
I have been looking for a solution here and in other forums, but none of them gave me the solution I needed.
Most scripts don’t work well with the absolute positioning of the Unbounce sections.
After hours of search and hours of testing, I have created a version that does work very nicely with Unbounce.
I was thinking to keep it for myself, but then I decided to offer it for a small price for everyone who really needs this feature. Here is the link https://gum.co/tUiUf 5 and use the code ‘earlybird’.
Contact me there if you need any modifications or help with the implementation.
Hi @Mathieu_Moutou here you go. Let me know if it works out!
Custom HTML:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
<body>
<div id="accordion">
<h3>How do I switch to one of the new Unbounce pricing plans? </h3>
<div>
<p>Go to <a href="https://app.unbounce.com/accounts/primary/subscription_plans" target="_blank">"Account Management -> Subscriptions</a>. Then, click the “Contact Support” button.</p><br>
<p><em>Please note that account migration can only be performed if you’re an account owner or administrator. If you're not sure who the owner is, get in touch with <a href="mailto:support@unbounce.com">support@unbounce.com</a> and we'll help out. </em></p>
</div>
<h3>What happens if I go over my new plan limits?</h3>
<div>
<p>That means you’re converting more, which is great news!</p><br>
<p>When your conversions or traffic go over your current plan limits, you’ll be automatically moved to the next tiered plan so you can keep those conversions coming. You can expect an email from us to give you a heads up if you're approaching your limits or go over.</p>
</div>
<h3>If I move to a new conversion-based pricing plan (Launch, Optimize, Accelerate, Scale, or Concierge) and I don’t like it, can I go back to my previous Unbounce plan on the old pricing?</h3>
<div>
<p>
Unfortunately, there's no going back to our old pricing plans once you've made the migration to our new conversion-based pricing. You can upgrade and downgrade on our new pricing plans at any time though. Make sure to contact our support team at <a href="mailto:support@unbounce.com">support@unbounce.com</a> if you have any questions.
</p>
</div>
<h3>What’s the deal with domain limits? Can I add multiple subdomains to a single root domain, or are all subdomains counted as an individual domain in Unbounce?
</h3>
<div>
<p>
All domains (including subdomains) are counted against your account domain limit. For example, if you add both try.mydomain.com and buy.mydomain.com, it’ll count as two seperate domains in Unbounce.
</p>
</div>
<h3>Can I stick with my current Unbounce plan?</h3>
<div>
<p>
Definitely. Most of Unbounce’s old pricing plans will be grandfathered, so if you’re loving your current plan, you can keep it. No changes needed. </p>
</p>
</div>
<h3>Will I still have the ability to create/purchase add-ons for my account?</h3>
<div>
<p>You can only purchase page packs if you are on an Essential, Premium, or Enterprise plan.<br>To purchase a 50 Published Pages pack, visit your Account Overview. If you are on a 2012 plan (Starter or Pro) or earlier, you cannot purchase additional domains or users for your account. Feel free to contact us at <a href="mailto:support@unbounce.com">support@unbounce.com</a> if you have any questions.
</p>
</div>
</div>
</body>
</html>
CSS Stylesheet:
<style>
.faq p {
margin-bottom:16px;
}
#accordion {
font-family: "Source Sans Pro" !important;
font-size: 18px !important;
line-height: 28px !important;
font-weight: 300 !important;
color:#303030;
background: transparent;
border-radius: 0px;
}
#accordion p {
font-size:18px !important;
font-weight: 300 !important;
color:#303030;
line-height: 28px !important;
}
#accordion p a {
color:#03f;
text-decortion:underline;
}
.ui-widget {
font-family: "Source Sans Pro" !important;
font-size: 18px !important;
font-weight: 300 !important;
color:#303030;
}
.ui-widget-content a {
color:#0033ff;
}
.ui-accordion .ui-accordion-header {
font-family: "Barlow Semi Condensed" !important;
font-size: 21px !important;
font-weight: 400 !important;
color:#303030;
padding: .75em .5em .75em .7em !important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: 1px solid #303030 !important;
background: #303030 !important;
font-weight: normal;
color:#fff !important;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
border: 1px solid #d8d8d8;
background: #f9f8f7;
}
</style>
Thanks a lot @tijshensen ! I implemented your script and it works perfectly well. I recommand it ! In addition, with the help of Tijs I was able to change it the way I wanted.
Hi, @athorburnwatt , can I have the code too?
@athorburnwatt on your example page https://pricing.unbounce.com/ what is the code or how did you create the plans that scale as you grow section that switches based on selecting monthly or annual?
Hey there! My colleague who worked on this page is going to follow up soon. I actually didn’t work on this page myself, and wouldn’t know about how they did that. Thanks!
Hi @athorburnwatt , your code seems to be working, but it is coming as plain text in the mobile view.
Heeeeello everyone (and @WR_13 !)
I have downloaded the full page in *.unbounce format.
Up for grabs for the next 30 days in this link
Tag me if you have any Qs!
Hey, I need to use an accordian too. Can you help me?
Hi @athorburnwatt, thanks for the code, it works great!
But how did you put the FAQ section before the footer?
Thanks for your help!
Hello @athorburnwatt Can you please share this code with me too?
Hello! This works well, but is there an easy way to collapse the first FAQ question/answer? I’ve update the HTML so all panels can collapse but we’re looking to close the top one initially and open on user click.
Thank you for sharing this code! It was exactly what I needed for our landing page. When I added the custom HTML, for some reason my background no longer stretched to the edges of the page. Has anyone else had a similar problem or have recommendations for a solution? Thank you!
Yes, that’s a familiar problem, since the heights of the sections in Unbounce are based on an absolute height.
There were a couple of other issues, that’s why I decided to build a good FAQ menu fitted for Unbounce. You can find the FAQ menu here.
Hi do you mind sharing step by step process to make this works ?
Yes, in order to make the accordion menu work you:
- Paste the content of Javascript-Accordion.js into the Unbounce Javascript tab.
- Paste the code from Stylesheet-Accordion.css in the Unbounce CSS editor.
- Paste the FAQ content into the ‘Embed Custom HTML Code’ block in Unbounce.
That’s it
Hi is there any way to make the accordion box responsive to the length of the text? Some answers are longer than others and there is a lot of empty space for the shorter answers.
Hi there, it doesn’t show up at my page.
Hey! Not sure if this is still active, but should this code be functioning on mobile? It’s working smoothly on my desktop view, but only displays a plain text version on mobile. I saw someone else asked the same thing but I don’t think it was answered so I figured I’d check. Thank you either way, it’s super useful!
