How to add accordian to the landingpage?

V

Hey guys I just wanted to add this accordian to my landing page?

I am a novice when it comes to injecting CSS and Javascript and HTML
codes onto a landing page.

thanks

the website address for the code is below

http://codepen.io/chriswrightdesign/p…

11 replies

Phillip

Everything I’ve ever seen on accordion say they should be avoided:

Phillip

Also, Unbounce has a fixed height layout, so you can’t dynamically change page/section length. You can add an accordion, but as you click through the sections, it won’t stretch the page to fit.

J

Hi Vihang, 
Phillip is right - both about the accordion not being recommended, and that we can’t exactly support it at this time. If this is something that you’d like to see built into the app, let me know and I’ll change this to an ‘Idea’ so that others can vote on it as well. 
Hope this helps!

Andi1

Definitely something we need added to Unbounce. A FAQ section is best used as an accordion. Do you support anything similar?

Hristian
Userlevel 7
Badge +3

Hi Andy, 

You can definitely add an accordion to your page for an FAQ section but you need to keep the height of it fixed.

You might be able to get away with adjusting the height if its the last section of your page. Here is link to another thread that discusses how to go about doing it: 

/topics/dynamic_unbounce_page_height

Alternatively you might want to look into accordions and tabs (horizontal/vertical) with a fixed height. It might not work for your particular use case, depending on the length of your content but never the less just some ideas you can try: 

1. http://jqueryui.com/accordion/#default

2. https://jqueryui.com/tabs/ ; http://jsfiddle.net/tj_vantoll/nn2qw/ ; http://keith-wood.name/uitabs.html

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
BBlaskievich

Try an accordion where the height stays nearly the same by collapsing the other siblings when a new one is opened.
http://jqueryui.com/accordion/#default

I

Hi Hristian!!

I found this topic about accordions on a Landing Page, and would like to try this. Unfortunately the code that @Vihang_Sharma shared in the first comment has some HTML and I’m confused trying to do it in Unbounce.
Could someone please help me out with the JS for Unbounce?

I’d appreciate it so much <3 thanks in advance

Hristian
Userlevel 7
Badge +3

Hi @ibrudap,

Implementing 3rd party code in an Unbounce page can be tricky and time consuming.

If you are absolutely sure you want to implement an accordion on your landing page reach out to me in a DM.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
N

There are so many threads on this topic and no good answers so here you go - adding an accordian FAQ section can totally be done if you pull code from here: http://jqueryui.com/accordion/#default. A few pointers:

  1. Create a new section in your Unbounce page.
  2. Drag out an HTML widget and double click to edit
  3. Copy everything in the link above that is between the tags and save.
  4. Open a new javascript and save everything from the link above from between the tags. Choose as your placement and save.
  5. Optional - you can start a new CSS stylesheet and override the default accordian styles. Use Chrome inspector to find the elements you want to target.

This is a fixed height page element but it can be made two work well if you keep the amount of text in each FAQ about the same. Not perfect, but doesn’t totally suck either. I agree with other comments here that Unbounce should find an elegant solution to this and add it as default functionality in the editor.

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 and use the code ‘earlybird’.

Contact me there if you need any modifications or help with the implementation.

tijshensen

Hi Kim,

I just woke up, sorry for the late reply.
Are you using any other scripts on your landing page?

With kind regards,
Tijs

Reply


Terms & ConditionsCookie settings