[How-to] Create a Collapsible Page Section



Show first post

105 replies

The answer is before body end tag.

I’ve been unable to get this to work. Any ideas? @Noah

I changed all the ids (box, block, button) from the git script.
http://unbouncepages.com/virtual-training-bed/

Where should the js be placed (head, after body, before body end tag)? I chose head.

Thanks.

Userlevel 7

Hi @lindspire,

If the page content is mobile optimized this script should work on mobile. I optimized the demo page and can confirm it’s working as expected: https://landingpage.noahmatsell.ca/collapsible-section/

One thing to double-check is that the containing box in the collapsible section is the full height of the section on mobile.

Was this every fixed? It seems mobile still doesn’t work for me either - screen shot shown.
Please let me know?

This is a very good script! Unfortunately, there were graphic bugs when using a form. To be more precise, the input fields were not among each other, but superimposed in a common line.
Has anyone had similar experiences? I would be very grateful for a workaround or something similar. Cheers.

Userlevel 6
Badge +3

Yet another AWESOME script @Noah!!! 🙌🏾

Hi @cbp5032
I actually did with a solution for this. Maybe it could also work for you.
First I had the elements in the Footer inside bigger boxes. And that didn’t allow them to move responsively with the footer.
(For example: A box that had inside 2 Text Boxes and 1 Image)

What I did was putting them outside in individual elements. That fixed the problem in my Landing Page.

Try it as well and let me know 😉 #goodluck

Hi @Noah, I’m having a similar issue to @ibrudap in that the footer is not correctly re-positioning. When you click to either expand or re-hide the collapsible section, the footer slowly jumps up the page. I’d love any tips into how to fix that. Thanks!

Userlevel 7

Sorry @Hani_Chang1 it’s not possible using this code. I’ll let you know if any updates are made down the road.

Thank you a lot, Noah.
Is there any possibility that I can use multiple collapsible pages on one page using your code?
I desperately need 3 collapsible pages!

Hey Noah!
Thanx for this feature. Is super useful.
I still need some help with this awesome code, because isn’t working on my LP.

I put the collapsible section exactly below the Footer, but when the section expands, all the elements (text box, images…) in the footer stay in the same position and overlap the information that’s shown.

Is there something I missed? Or someone knows please how to fix that? Thank you 🙂

Hey Jess!!

Could you please help me little further with the implementation of Collapsible Divs?
Thanx 😃

Hi James,

you mean like having a Hidden Collapsible Page Section triggered by a Button and inside having a Collapsing Divs? Like here shown ?

I just found something about the collapsing Divs HERE, but will be awesome if the Unbounce Experts could explain a little more how to implement it, because only with the CSS code can be harder than normal.

Please PM me, or contact me, or just answer here if this is actually possible: Collapsible Divs inside a Collapsible Page Section. And how to implement them?

Thanks

Hi @Noah …thanks for the code; it works great! I was wondering though if there was a way to have the “toggle button” ONLY reveal the collapsed section and then have another button (like a minus sign) available in that section that would then collapse it?
Thanks,
James

Hi @Noah … I am having trouble making this work on mobile. Desktop works fine… except that the grey bg stops when collapse is open.

http://unbouncepages.com/training-template-2647102786853/

button is Testimonials

My mobile version is a completely different bunch of sections. Effectively, I need a another instance of the Javascript … with different IDs for section, box, and button … but this did not work.

What’s the solution?

Thanks,

Oliver

I agree with Andi1 on this one - a study that shows landing pages convert better without collapsible FAQ sections is completely useless. Just because it didn’t work for someone, doesn’t mean it won’t work for you. If we just used case studies or best practices as a guide on building landing pages, then what’s the point of A/B testing?

Hey Jess, Any plans to implement a toggle feature in the tool box? Walls of text are conversion killers and toggle feature is a must have. I run across many cases where I would use this, not just FAQs. Examples: Showing a preview of a review with a “read more” link that expands the rest of the review, product information (ingredients, instructions, ext.), or just on general sections of the page that have in depth information.

Userlevel 7

Hey @Tim_Corlett, I’ve done some testing and it appears to be working on mobile as expected. Could you direct message me with some browser/device specs to help me try to recreate what you’re seeing?

Hey @Noah I’m having issues on mobile and it looks like your demo site is too. Positioning of elements is all over the place. Do you happen to know a fix for this? https://www.dropbox.com/s/zf12wj9kozyt5th/Screenshot%202017-03-09%2017.59.49.png?dl=0

Userlevel 7

Hey @kiddswoosh, looks like you are missing a toggle button and your IDs in the script need updating (steps 3 + 5). Hope this helps point you in the right direction!

I have tried to use this script for my landing page I have followed the steps, but for some reason, it isn’t collapsing my section. Here is my link http://unbouncepages.com/financialeliteservices/

This is awesome! 🙂 Plus, also really easy to use!

Thanks for the explanation here, it definitely gives me some clarity around the issues I have had with Unbounce over the years. Overall support is great not just in the forums but the live support unbounce provide within the builder. Please don’t remove that and look to increase it in the future as this type of user experience is second to none!

Sticky&scrolling headers, countdown timers, expandable sections and insert favicon are content builder features that I always think, damn these features would be soooo helpful to anyone building out a page. I wonder if I still have to use scripts to implement them? Anyway I can’t wait for these new features!

Hey @Andi1! You caught my attention as well, so I’m going to chime in.

You are absolutely correct. In fact, some of our more recent features (lightboxes, video backgrounds) started off as scripts in the Community.

There’s two main reasons that developing Tips & Scripts are important to us:

  1. It solves customer pain-points quickly and easily; and allows us to release new functionality with smaller teams and a minimal investment of time/resources.
  2. It allows us to validate the idea by measuring things like adoption, usage and ease of implementation.

It’s an easy and lightweight way to launch ideas, test iterations and analyze the outcomes. We’re big fans of the Tips & Scripts series here and I’m glad to hear you are, too.

I’ve personally tested out quite a few products similar to Unbounce and I’ll agree that there is usually functionality from one that is missing in the others. We’ve also been around the longest, so I’m confident in saying that we have the most robust and powerful builder on the market.

This brings a few caveats. First, it’s a little bit more difficult for us to jump in with both feet and develop features as quickly as smaller companies can. We have a lot of teams working in sync to solve incredibly complex problems that are a bit bigger in scope than some of the smaller features that we see requests from.

In fact, we’re currently developing really, really exciting products that will blow your socks off once they’re ready - but again, they take a lot of hours, resources and TLC to build. We’ve found a happy medium in developing smaller ideas with things like Tips & Scripts and Ship-it Day… but we can always be better.

As @Jess said though, thank you so much for your feedback. Serioiusly. Feedback is crucial for us to move forward, prioritize and ultimately build better products. We’ll pass this on to our teams internally and they’ll factor it in to the decision making process for our roadmap.

Until then, please feel free to stick around the Community and test out more Tips & Scripts. Feel free to give feedback where you feel it will help, just keep it classy and respectful and we’ll continue to be super receptive and transparent. 🙂

Yes the community has been great and in combinations with some excellent tutorials I have been able to implement scripts into my landing pages. No complaints there, however like I said other companies seems to be way ahead of the game with much smaller teams and features like these that are built into the content builder. It’s not a whack at unbounce but my time is mich better spent in areas not related to micro focusing my time on scripts. Excuse my ignorance here but if they can be done with scripts they should be easily developed into the builder??

Reply