[How-to] Create a Collapsible Page Section

Show first post

105 replies

R

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

Thanks in advance!

pranava_work

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.

Zoe_Tattersall
Userlevel 6
Badge +3

You’re too kind! Just thought it might help some others get the most out of their Sticky Bars right now ☺

Side note: probably should also mention there is additional CSS added to for this particular design – on the website that it’s on, I’ve added the below CSS to remove the background, position it and remove the standard close button:

/* UNBOUNCE */
.ub-emb-iframe-wrapper .ub-emb-iframe {background: transparent !important; box-shadow: none !important;}
.ub-emb-bar .ub-emb-close {display: none !important;}
.ub-emb-iframe-wrapper {margin-bottom: 60px;}
We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
Jess
Rank
Userlevel 7
Badge +1

@Zoe_Tattersall you’re amazing!!! 😍

Zoe_Tattersall
Userlevel 6
Badge +3

Hi all, I wanted to share a quick hack I did to use this awesome script from @Noah on a Sticky Bar 😃

  1. Follow all of the above set-up instructions – make sure you still add your content within a box (the ‘Section’ will be the Sticky Bar standard section that we will address next).

  2. Add a class to the ‘Sticky Bar Properties’ so you can reference it in the Javascript ( 🙌 Unbounce for now being able to add classes!)

    Screen Shot 2020-04-22 at 10.05.29 am

  3. Adjust the original Javascript to reference this new class instead of a page section:

    var toggleSection = $('#lp-pom-root .class-bar');

Screen Shot 2020-04-22 at 10.12.51 am

  1. Ta-da! Now you have a collapsible Sticky Bar – here’s how I used it for my client (‘Be First to Know’ is a transparent background button):

StickyBar-Collapsible

Screen Shot 2020-04-22 at 10.02.09 am

Screen Shot 2020-04-22 at 10.02.17 am

We’re more than just your type. We do awesome, too. And website design, graphics, product photography, video content & more. https://sevahcreative.com
R

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

M

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 ?

Jeff_Collins

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

T

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?

nirajansth

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

Sahil_Kanaya

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!

Jess
Rank
Userlevel 7
Badge +1

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

S

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!

M

Exactly what I’m looking for! However, when the sections expand, they are overlapping the text/section below. Is there a fix for this? I hope?! 🙂

M

Just wondering if you ever figured this out? I’m having the same issue.

Y

Is there any way to launch the collapsible section other than a link?

Ideally, could you launch it when someone scrolls to a certain point on the page?

waspmobile

Hi,
Would anybody who has done this for multiple sections be able to provide a link to their page to see well it works. I got it working for the page as it was very useful.

Can you setup an if/else if you had multiple sections in the JS code.

Thanks in advance.

Regards,
Ryan

Caroline
Userlevel 5
Badge +2

Hi @MyWellCare_Deutschla!

Could you send a link to your page? Feel free to send me a private message if you’d like!

Thank you,
Caroline

MyWellCare_Deutschla

Hi, i checked out your code for collapsible panels, but did not manage to make it work… : i added the HTML in a html block on the page section and I added the CSS to the CSS, below the page… yet it just shows the text…

Can you advise? Thx

D

Hey,

@Noah @maxl I tried your tipp for more than one collapsible page section but it isn’t working correctly. Do you have an example for your solution?

sleighty

Is there an unbounce template that has this built in? Tried to figure this out for myself with zero luck.

O

Hi there, the button will open the panel but does not collapse the panel back down on the mobile version? Is it not supposed to do this on both desktop and mobile?

bogdanbesliu

Hello. I know its been a while since the code was put here, but I just got around to using it and I have 1 problem. The collapsible part works, but the sections underneath it don’t move accordingly. Instead of a clean section going up and down, I have a big blank space that fills when I click the button. Any ideas where I went wrong?

Thank you!

mfisher

Has anyone had luck making this script work for more than one element? Unbounce has an example page that uses 3 but mine only works with one button and section.

Kaitlyn_Shriver1

Is there a way to do this but with multiple sections?

Reply


Terms & ConditionsCookie settings