Adding accordion sections to a page for FAQs

Technical Questions
#1

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

#2

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 !

2 Likes
#3

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.

1 Like
Add FAQ Accordion to page
#4

Hello @athorburnwatt

It will be very helpful if you can have the code of this FAQ :slight_smile:

#5

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.

#6

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>
1 Like
#7

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.

#8

Hi, @athorburnwatt , can I have the code too?

#9

Hi Laura, here it is: Adding accordion sections to a page for FAQs - #6 by athorburnwatt

1 Like
#10

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

#11

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!

#13

Hi @athorburnwatt , your code seems to be working, but it is coming as plain text in the mobile view.

#15

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!

1 Like