Solved

Adding accordion sections to a page for FAQs

  • 19 January 2021
  • 42 replies
  • 5273 views
Show first post

42 replies

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

F

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

Gabriel_Aceves

Can I have it too?

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!

C

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

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!

K

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

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!

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

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

L

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

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.

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

Mathieu_Moutou

Hello @athorburnwatt

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

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.

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

Reply


Terms & ConditionsCookie settings