Solved

Adding accordion sections to a page for FAQs

  • 19 January 2021
  • 42 replies
  • 5157 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

julien_level
Userlevel 5
Badge +4

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 !

Julien
athorburnwatt
Rank
Userlevel 2
Badge +1

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.

Mathieu_Moutou

Hello @athorburnwatt

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

tijshensen

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.

athorburnwatt
Rank
Userlevel 2
Badge +1

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>
Mathieu_Moutou

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.

L

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

athorburnwatt
Rank
Userlevel 2
Badge +1

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

W

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

athorburnwatt
Rank
Userlevel 2
Badge +1

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!

K

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

PabloP

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!

C

Hey, I need to use an accordian too. Can you help me?

Jiawen_Chen

Hi @athorburnwatt, thanks for the code, it works great!

But how did you put the FAQ section before the footer?

Thanks for your help!

Gabriel_Aceves

Can I have it too?

F

Hello @athorburnwatt Can you please share this code with me too?

athorburnwatt
Rank
Userlevel 2
Badge +1

Hi @fredy @Gabriel_Aceves the code is pasted above 🙂 Adding accordion sections to a page for FAQs - #6 by athorburnwatt

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.

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!

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.

ordinato_carwash

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

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

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.

M

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

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!

Reply


Terms & ConditionsCookie settings