Hi,
I am looking for a script that enables me to add FAQ accordion sections to the page. I have found this script posted by unbounce support to have one collapsible section:
Landing pages are designed to provide just enough information to lead your audience to convert. However, there are times when your campaign has a lot of information that you need to include, this can lead to a very cluttered landing page very quickly.
[image]
Clutter distracts from conversions, so we’re happy to announce that we’ve cooked up a brand new script to allow you to include all the necessary content in your landing page without looking like a content…
However, it does not work for multiple collapsible sections on one page.
Additionally, I have found this script: Dynamic Section Height - #3 by webim but it does not work for me either since the script is using custom IDs and you can only assign custom classes in unbounce. When doing so and changing the script, it does not work for me.
Has anyone found a solution for that? Would appreciate your answers.
Thanks and best Julia
Best answer by phildilello
Hey everyone! Just wanted to provide the updated script as we’ve since revised the formatting of the FAQ section on our Pricing Page. Below is the updated code for implementation within the Classic Builder.
Custom HTML
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100;200&family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
<div id="faq-section">
<div id="faq-container">
<div class="collapse faq-parent ">
<h3 class="faq-title">Frequently Asked Questions<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h3><br>
<p>Have a different question about how Unbounce works or the pricing plans?<br>
Try getting in touch with one of our specialists via
<a href="">live chat.</a>
</p>
<div class="toggle-content">
<div class="faq-child">
<div class="collapse">
<h4 class="faq-title">What is the Unbounce Conversion Intelligence™ Platform?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p><strong>The Unbounce Conversion Intelligence™ Platform</strong> is Unbounce’s new suite of AI-powered marketing
solutions. Create landing pages you know will convert with <strong>Smart Builder</strong> and connect visitors to
their best-fit pages with <strong>Smart Traffic</strong>. Conversion intelligence pairs marketers’ know-how with
machine learning features to increase the conversion rates of marketing campaigns at every touchpoint. <br><br>
<strong>Classic Unbounce</strong> features (like our <strong>Classic Builder</strong>, A/B testing, AMP, and lead
integrations) are still available on all of our Launch, Optimize, and Accelerate plans.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">What’s the difference between Smart Builder and Classic Builder?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p><strong>Smart Builder</strong> is a landing page builder (currently in Beta) that uses AI and machine learning
to help marketers create higher-converting landing pages. By providing your industry, audience, and goals, the Smart
Builder is able to provide tailored templates, section components, and even copy based on over 1.5 billion data points.
<br> <br> <strong>Classic Builder</strong> is the original landing page creation, testing, and optimization platform
used by over 15,000 brands worldwide. From landing pages to A/B tests, popups, sticky bars, AMP, custom scripts, and
more—Classic Unbounce is the best-fit landing page platform for confident marketers, designers, and agencies looking
to create and customize online marketing campaigns that jam with their brand, boss, and client needs. <br>
<br> Our Launch, Optimize, and Accelerate plans all give you access to both our Smart Builder and Classic Builder.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">Are Smart Builder and Smart Copy separate products? Is there a plan that includes both?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>While both <strong>Smart Builder</strong> and <strong>Smart Copy</strong> are part of the Unbounce Conversion
Intelligence™ Platform, they currently require separate Unbounce subscription plans. <br><br> Our Launch, Optimize,
and Accelerate plans provide you with access to Smart Builder, along with products like <strong>Smart Traffic
</strong> and <strong>Classic Builder</strong>.
To use Smart Copy, you need to create a secondary account on either our Starter or Growth plan.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">How does the free 14-day trial work? Can I cancel anytime?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>Your free 14-day trial on a Launch, Optimize, or Accelerate plan gives you full access to all of the corresponding
plan features. There are no restrictions, and you won’t be billed until after your 14-day trial is complete.
<br><br> We’ll send you a reminder email near the end of your Launch, Optimize, or Accelerate trial to verify that
you want to continue using Unbounce. If you want to cancel, you can do so at any time by logging into your
Unbounce account, going to “Account Management,” selecting “Subscriptions,” and clicking “Cancel.” <br><br>
You can sign up for an entirely free Smart Copy account using the Starter plan, or get unlimited content generations
with a free 14-day trial on the Growth plan. To cancel your trial,log in to your Smart Copy account, go to “Admin,”
select “View” under “Plan Details,” and click “Cancel.”</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">Why do you need my credit card for the free trial?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>When you sign up for a free 14-day trial with our Launch, Optimize, or Accelerate plans, you’ll be asked to provide
your credit card information. This ensures that—in the event you decide to continue using Unbounce beyond the 14-day
trial period—there are no interruptions to your subscription. <br><br> If you want to try the Unbounce Conversion
Intelligence™ Platform without providing your credit card information, you can get a preview with our
<a href="http://unbounce.com/smart-builder-preview">interactive demo</a>,
or sign up for a free Smart Copy account (using the Starter plan).</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">Can I change my plan?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>You can change from a Launch, Optimize, or Accelerate plan by logging into your Unbounce account,
going to “Account Management,” and selecting “Subscriptions.” You can upgrade to a higher-tier plan at
any time, but switching to a lower-tier plan will only take effect at the end of your current billing cycle
(monthly or annually). <br><br> To change your Smart Copy plan from Starter to Growth (or vice versa), simply
log in to your Smart Copy account,
go to “Admin,” and select “View” under “Plan Details.”</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">How does hosting work? Can I connect my own domain?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>Our Launch, Optimize, and Accelerate plans all include free hosting through Unbounce on www.unbouncepages.com.
You can also publish your landing pages directly to your own domain or WordPress website (in which case you’ll be responsible for hosting).</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">What counts as a conversion? What counts as a visitor?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>We log a <strong>conversion</strong> when someone completes your assigned conversion goal on a landing page or in a
pop-up or sticky bar. Common conversion goals include clicking a call to action button or submitting a form.
<br><br> A <strong>visitor</strong> is a person who views your landing page, popup, or sticky bar at least once in a
given month. Using cookies,
we ensure each visitor only counts once toward your limit—no matter how many times they return.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">What happens if I exceed my conversion or traffic limits?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>If it looks like you’re at risk of exceeding your conversion or traffic limits, we’ll be sure to let
you know by email and through in-app messages. In the event that you go over your limit, we’ll
automatically upgrade you to a plan with higher limits for the next billing cycle (monthly or annual).
Learn more about <a target="_blank" href="https://documentation.unbounce.com/hc/en-us/articles/360044911872-What-Happens-if-I-Exceed-My-Traffic-Conversion-Limit-on-My-Plan">
what happens if you exceed limits on your plan</a>.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">Is Unbounce GDPR compliant?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>Businesses are responsible for including GDPR (and/or CASL) compliance in their marketing strategy.
The best way to ensure GDPR compliance is to consult with legal counsel. <br><br> Unbounce can help you align with
GDPR best practices through functionality you can apply to your campaigns. For example, using Smart Builder, you can easily add
checkbox fields to your forms that allow visitors to consent to your privacy and data storage practices.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">How much does an Unbounce App cost?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>Most Unbounce Apps are currently available to install at no cost. Some providers may have a monthly subscription or per-use fee, others may offer a free plan or a trial period.</p>
</div>
</div>
<div class="collapse">
<h4 class="faq-title">Are Unbounce Apps available on my plan?<i class="fa fa-angle-down fa-fw"></i> <i class="fa fa-angle-up fa-fw"></i></h4>
<div class="toggle-content">
<p>Unbounce Apps are available in Smart Builder for all <strong>current</strong> paid and trial plans.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
Javascript:
<script>
$(document).on('click', '.faq-title', function() {
$(this).parent().siblings().removeClass('expanded').addClass('collapse');
$(this).parent().toggleClass('expanded collapse');
});
</script>
CSS Stylesheet
<style>
#faq-section p{
font-family: 'source sans pro',sans-serif;
font-weight: 300;
font-size: 18px;
color: #303030;
line-height: 28px;
}
#faq-section h3, #faq-section h4{
position: relative;
font-family: 'barlow semi condensed',sans-serif;
font-size: 40px;
cursor: pointer;
margin: 0px;
color: #303030;
}
#faq-section h4{
font-size: 24px;
padding-top: 40px;
padding-bottom: 18px;
padding-right: 50px;
}
#faq-section .fa{
font-size: 40px;
position: absolute;
cursor: pointer;
right: 0;
top: 60%;
transform: translateY(-50%);
}
#faq-section{
background-color: #f9f8f7;
position: relative;
padding: 3.89rem 0;
}
#faq-container{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#faq-container> .faq-parent{
width: 75%;
text-align: center;
}
#faq-section .faq-child{
text-align: left;
margin-top: 4rem !important;
}
#faq-section .faq-child>div{
border-bottom: 1px solid #dee2e6!important;
padding-bottom: 1rem!important;
width: 100%;
}
#faq-section .expanded .toggle-content {
display: block;
}
#faq-section .collapse h4 .fa-angle-down {
display: block;
}
#faq-section .expanded .fa-angle-down {
display: none;
}
#faq-section .collapse .toggle-content {
display: none;
}
#faq-section .collapse .fa-angle-up {
display: none;
}
</style>