How to Install in Unbounce

Hi Noah,

I was also checking the site out: http://landingpage.noahmatsell.ca/collapsible-section/

and it seems to have the same problem as mine. When you resize the browser the content overlaps at the bottom.

If you see on my web page: http://unbouncepages.com/testing-quote-14/

When I make the browser window as narrow as possible the content overlaps.

Is there any way to fix this?

Thanks!

Hi Sam,

In this post @webim shared an excellent workaround for a collapsible page section. It might be worth getting in touch with them to see if you need further assistance. But in the meantime, give this a read and see if it helps. 🙂

Hi @Noah, I am seem to encounter an issue in which the collapsible section, when opened, does not push the fixed section below it further down, but rather overlaps over it. In addition, it causes a footer we use on every page on our domain to go haywire and jump to the middle of the page. Any help would be appreciated!

Anyway I can hide the the button - in this case “Show Speakers” after it has been clicked once?

Hi @Noah I’m having the same issue. The footer (which is the section below our collapsible FAQ section) is not moving, so it’s overlaid on top of the collapsible section. Any workarounds?

Is the written text within the collapsible section crawled by Google?

Hi,

I did everything and put the JS code - but it’s not working… where can I find more help for how to install a collapsible section in Unbounce ?

this works great on the desktop version, but can’t get it to work on mobile…any ideas what the issue may be?

hi, first, thanks to all for sharing their knowledge. i have a question, which is related to this topic, but in the end i need something, which makes the dynamic Adaptation without a button or similar.

i did embed a .js form, in this case a quiz, works good. meanwhile the process of the process the script box has the same height, but in the last step of the registration it expand downwards and is overlapping some design element. my question is now, when the code box (with the external js) expands, i would like to enjoy, if the rest of the page (the sections below) will automatic move down, so that there is no overlapping anymore. is there a solution?

PS: this script i used on another ub page and work well.

Looking for the same hack. Has anyone gotten to add multiple collapsible sections?

Thanks in advance!

Hola buenas tardes, me gustaria saber como replicar esto y tener varias secciones plegables dentro de mi Landing Page,

les agradeceria mucho su ayuda. 😀

Hi, I’m having the same issue…

Someone managed to resolve this?

Thx.

I understand the frustration.

I’ve stopped trying and now i use lightbox.

You create the question you want and you had a transparent button to lightbox (containing only the link) over your question. this way you’re not limited by the design restriction of the button.

Only limitation, is the number of light box (20) and the more you add, the slower the builder will get (at least for me).

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.

SOLUTION

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.

Does this javascript get pasted in the Head, Before Body, or After Body?

Hi,

My collapsible page section is working, but when I open it the background of my landingpage changes to white in the sections below. However, the overall background of my page is set to black.

Anybody who knows why this happens and how I can solve it? The landingpage is https://www.allroundflandrien.be/ and you can find the collapsible page section if you click on ‘gallerij’ in the navigation and the button ‘Meer foto’s bekijken’ (= show more pictures).

Thank you in advance!

Kind regards,

Martijn

Hey, I’m thinking about buying this, but want to apply it to large sections chalked full of images/text/colors/etc. Will it work for this application as well? See page here - https://online.homeusa.com/portfolio/

Hi, for this functionality I wouldn’t recommend using this script. It’s possible to do it, but it requires a good understanding of HTML and CSS to set it up as you would like.

I use this code and works perfect.

Now I have a question. How can I use it multiple times in the same landing? I’ve tried duplicating the code and change all variables (adding a 2 at the end), and the collapse efect works perfect on the first section, but it doesn’t push the second section’s siblings.

Does anyone know why this happens?

Hi Gaston,

It’s possible to have 2 FAQ menu on one page. However, the FAQ menus are not interconnected with each other. If the user opens the first item in the first FAQ menu and then scrolls down to the second menu to open an item there. The first item of the first FAQ menu stays open.

This is done by design because otherwise, the user would experience strange behavior in the browser where suddenly the text moves up because the first item of the first accordion closes.

I’m suddenly having an issues where when you click on the button that expands the hidden section, it opens but then quickly closes and moves you back to the top of the page. I thought it might be a conflict of scripts, so I tried stripping out all of them and just using the collapsible section script, but still got the same results.

It works fine in preview mode, but when published it breaks. I’ve compared to other pages I’ve used this on, and everything is the same as those. Any ideas? (page in question: https://online.uncpn.com/)

In this part of your code:

<a class="lp-element lp-pom-button" id="lp-pom-button-783" href><span class="label"><strong>Locations &amp; Providers ▼</strong></span></a>

You have ‘href’, it should not be there. Because this will reload the same page.

I don’t know if you can remove this, maybe you had a link in this element before?

That seems to be something that Unbounce or one of the scripts is throwing - I created a brand new button and got the same results. I wonder if something has gone wonky in this particular page (since it’s working on other pages)? I might have to try re-creating the page from scratch (which is super frustrating). 😦

Hi Noah - is this still the case today?

Would really love to be able to do multiple sections!

This is awesome!  Is there any way to password protect the dropdown box?