Yes, we managed to solve the issue. The solutions work when following the tutorial step by step.
I am trying to download the HTML file. Something super strange comes up - it isn’t the right file. Can you please help me???
The file that is part of the download is carousels_slider.unbounce . This file can be imported into Unbounce. To do this, Login, go to ‘Pages’ and click on ‘Upload an Unbounce page’
Hi, I have followed the steps above and input the codes into my page, however something doesn’t seem to be connecting properly. Is someone able to assist and point out where I am going wrong. Thanks
Here is the page: https://guide.yourstreet.co/free-guide/
Hi Harriet,
Feel free to contact me. You find my details at the bottom of the step-to-step manual doc.
Thank you have sent a message on here.
Hi there, I can’t seem to get it working after going through your step by step manual.
I got it it to work. What happened was that I opened the HTML editor in chrome and it saved a differently. I had to redownload your html. Thank you.
Great! I will update the manual. I think it’s easier to copy the HTML from the manual, instead of the HTML file.
Thank you for your reply!
can i have the code as well needed it badly
Pablo, you have no idea how much the file helped me. I studied every part of the project and my work is now on another level.
Is it possible to share other unbounce.com pages?
I have an accordion that works perfectly with styles and it's complete, I did it in HTML with CSS. I have a problem, when I activate the view for mobile version, it stops working, the cells do not expand, in the desktop version it works without problem.
I have tried different ways to do it and most of them do not work for the mobile version, does anyone know what can happen?
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>
@phildilello Hi! Is there any way to make the accordion section expand and push the lower sections down with it? Currently I have to reserve space in advance and it creates a wide gap of empty space.
Hey guys, I’ve been trying to add the script that @phildilello shared to my Landing page but it’s breaking the page.
I was wondering if anyone could help? Thank you so much
Here is the landing page: https://crushwinexp.com/semi-private-day-trip-to-wine-country/
Hey @peiji! I spent a bit of time reviewing your page and I was able to get the FAQ section working on your page as desired. I think it might’ve been just that we deleted too much out from the HTML portion when we were adding in our own content.
Have a look at the Loom Video and published page below. I’ll send you a message as well privately with the page itself such that you can copy and paste in the code or simply use the page I built if it’s easier!
Cheers!
http://unbouncepages.com/2554009e-c335-11ed-8352-024269ea2273/
Hey @WeScale! My apologies on the delayed reply. Unfortunately, since the Classic Builder is an absolute drag and drop builder and therefore static, the code itself won’t naturally increase the size of the section.
There would need to be custom JS/CSS in place to increase or decrease the section size based on the content within it, which unfortunately goes beyond my area of expertise.
I would recommend posting in a new thread under Classic Builder → Ask a Question for visibility if you’re hoping to accomplish this!
Sorry I couldn’t be of much help, let me know if there’s anything else I can assist with though.
Dear all, even though this is an older topic, I hope my solution that I built for an Unbounce website might help anyone else too. It’s an easy adjustable FAQ widget that can be placed anywhere in a new section. If needed, it also takes care of adjusting size/position of following boxes/sections and it works on mobile.
All you need is this code:
<style>
:root {
--primary-color: #460069;
--secondary-color: #ff9a14;
--answer-hgr-color: #460069;
--text-color: #fcffd6;
--max-width: 80%;
}
.faq-container {
max-width: var(--max-width);
margin: 0 auto;
background-color: var(--primary-color);
border-radius: 8px;
overflow: hidden;
}
.faq-item {
border-bottom: 1px solid var(--primary-color);
border-radius: 8px;
margin-bottom:10px;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
width: 100%;
background-color: var(--primary-color);
color: var(--secondary-color);
font-weight:bold;
cursor: pointer;
padding: 18px;
text-align: left;
border: none;
outline: none;
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-question:after {
content: '+';
font-size: 24px;
color: var(--secondary-color);
}
.faq-question.active:after {
content: '-';
}
.faq-answer {
background-color: var(--answer-hgr-color);
color: var(--text-color);
padding: 18px;
display: none;
}
.faq-answer p {
margin: 0;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var faqQuestions = document.querySelectorAll(".faq-question");
var parentDiv = document.getElementById("lp-pom-block-167");
var parentDiv2 = document.getElementById("lp-code-168");
var nextDiv = document.getElementById("lp-pom-block-170");
var nextDiv2 = document.getElementById("lp-pom-box-173");
const originalheight1 = parseInt(window.getComputedStyle(parentDiv).height);
const originalheight2 = parseInt(window.getComputedStyle(parentDiv2).height);
faqQuestions.forEach(function(question) {
question.addEventListener("click", function() {
this.classList.toggle("active");
var answer = this.nextElementSibling;
var isExpanding = answer.style.display !== "block";
answer.style.display = isExpanding ? "block" : "none";
adjustParentHeight();
});
});
function adjustParentHeight() {
var totalHeight1 = 0;
var totalHeight2 = 0;
faqQuestions.forEach(function(question) {
var answer = question.nextElementSibling;
if (answer.style.display === "block") {
totalHeight1 += answer.scrollHeight;
totalHeight2 += answer.scrollHeight;
}
});
parentDiv.style.height = originalheight1 + totalHeight1 + "px";
parentDiv2.style.height = originalheight2 + totalHeight2 + "px";
nextDiv2.style.marginTop = totalHeight1 + "px";
}
});
</script>
<div class="faq-container">
<div class="faq-item">
<button class="faq-question">Question 1</button>
<div class="faq-answer">
<p>Answer to question 1</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 2</button>
<div class="faq-answer">
<p>Answer to question 2</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 3</button>
<div class="faq-answer">
<p>Answer to question 3</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 4</button>
<div class="faq-answer">
<p>Answer to question 4</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question">Question 5</button>
<div class="faq-answer">
<p>Answer to question 5</p>
</div>
</div>
</div>
Please see examples and a quick tutorial on how to style the FAQ here: https://www.kursmediasystems.de/artikel-free-faq-for-unbounce.html and also in this Youtube video. I hope it helps you create an easy to use FAQ for your websites! 
Hi @kurs.dev!
Such an amazing solution. I’m so excited to try it inside the Unbounce builder. I think this is a life-changing solution for Unbounce. It was quite impossible to make this possible, but you did it! Amazing!
Is it possible to share the Unbounce file with me at mdmahinurkhan9@gmail.com?
Thanks,
Mahin
Hi @kurs.dev!
I tried already, it’s working perfectly for FAQ and after FAQ section. But facing problem if i want to add some more sections after the FAQ section. Please take a look at his link and loom:
https://ub.grooic.com/accordion-faq-widget-for-unbounce/
Let me know if you have any idea. Thanks
