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

• http://www.nngroup.com/articles/accordions-complex-content/


• http://www.usertesting.com/blog/2014/10/22/usability-tests-tripled-lead-generation-conversion-rates/#attachment_18603

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.

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!

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

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

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

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 thanks in advance

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

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.

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.

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