Solved

Adding accordion sections to a page for FAQs

  • 19 January 2021
  • 42 replies
  • 5209 views
J

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:



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

icon

Best answer by phildilello 13 June 2022, 20:52

View original

42 replies

phildilello
Rank
Userlevel 2
Badge

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.

phildilello
Rank
Userlevel 2
Badge

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/

 

 

 

P

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/

W

@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. 

phildilello
Rank
Userlevel 2
Badge

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>

jonathan pereira

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?

danielmesqta

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

can i have the code as well needed it badly

tijshensen

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!

Khoa_Le

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.

Khoa_Le

Hi there, I can’t seem to get it working after going through your step by step manual.

Harriet_Exton

Thank you have sent a message on here.

tijshensen

Hi Harriet,

Feel free to contact me. You find my details at the bottom of the step-to-step manual doc.

Harriet_Exton

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/

tijshensen

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’

Henry_Dafoe

I am trying to download the HTML file. Something super strange comes up - it isn’t the right file. Can you please help me???

tijshensen

Yes, we managed to solve the issue. The solutions work when following the tutorial step by step.

anastasiad

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!

M

Hi there, it doesn’t show up at my page.

Sefira

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.

tijshensen

Yes, in order to make the accordion menu work you:

  1. Paste the content of Javascript-Accordion.js into the Unbounce Javascript tab.
  2. Paste the code from Stylesheet-Accordion.css in the Unbounce CSS editor.
  3. Paste the FAQ content into the ‘Embed Custom HTML Code’ block in Unbounce.

That’s it

ordinato_carwash

Hi do you mind sharing step by step process to make this works ?

tijshensen

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.

M

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!

C

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.

Reply


Terms & ConditionsCookie settings