[How-to] Create a Collapsible Page Section

Userlevel 7
  • Former Unbouncer
  • 126 replies

Landing pages are designed to provide just enough information to lead your audience to convert. However, there are times when your campaign has a lot of information that you need to include, this can lead to a very cluttered landing page very quickly.

Clutter distracts from conversions, so we’re happy to announce that we’ve cooked up a brand new script to allow you to include all the necessary content in your landing page without looking like a content hoarder!

Introducing: Collapsible Page Sections in Unbounce! :spinbounce:

You can see this in action (built in Unbounce) here:

Now, before you go on a Collapsible Page Section Crusade, we must mention that having too much content on your landing page can be a killer for conversions.

Sure, bells and whistles are fun sometimes, but when you’re trying to lead your viewers to convert - you want to make sure it’s as straight-forward as possible.

This Collapsible Page Section feature should be used responsibly. That being said, this is a very tasteful way to fit in necessary content into your landing pages, enjoy!

How to Install in Unbounce

Click Here for Instructions

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.


This script only works for one section per page. Trying to apply this to multiple sections on one page may cause issues.

Grab the latest script here:


Step 1.

Create a new page section and your desired content.

Step 2.

Nest your content inside of a box element (this simplifies things for the script).

Step 3.

Create a button element as your section visibility toggle.

Step 4.

Copy script from collapsible_section.js and paste in your javascripts section

Step 5.

Update your IDs

Step 6.

Save, Preview and celebrate! :parrot:


Like anything else you implement on your page, you’re going to want to test this out thoroughly to see what effect (if any) it has on your conversion rates. We recommend running an A/B test and segmenting a small portion of traffic towards the page - just to be safe.

This how-to was a joint effort with my sister from another mister @Rob!

Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

105 replies

I’m going to bite here. Viewer discretion advised.

This has to be one of the most lacking inbuilt features for unbounce. It’s the reason I had to buy Thrive Themes and begin systematically transferring my landing pages across.

Collapsible page sections and text should be inbuilt. It’s a feature that should be as simple as placing text into the landing page. Every time I have mentioned this to the unbounce team they redirect me to some bogus study that landing pages convert better without a collapsible FAQ section, which is complete rubbish because the study didn’t take into account if it’s information that’s only relevant to some people. Collapsible sections should be the next inbuilt feature release. Most ppl who use unbounce aren’t developers and they’re definitely not going to pay someone $1000 to implement scripts to make up for these shortfalls/oversights in development. We need intuative features on demand from the right hand editor.

Userlevel 7
Badge +1

Hey @Andi1!

Thanks for biting! I’ll bite back. 🙂

Honestly, the critical feedback is just as, if not more important than all the positive feedback. As much as we’d like to put sticky notes of all the praise we receive on our walls, those won’t help us to build a better product.

In regards to this, sadly, there are only so many things that our team of Product Builders can be responsible for at a time - without compromising the quality of each new feature. We’ve released this workaround in hopes that it will allow users to add Collapsible Page Sections where they’re needed, and buy our Product Builders some time while they work on their current projects.

I won’t hurl statistics at you, as each case is totally unique and sometimes a Collapsible Page Section is a must-have in a landing page (especially FAQ sections).

I totally hear you, and that’s exactly why our Tips & Scripts exist - for both novice and experienced Unbounce users. Plus we have our @Unbounce-Experts who are never afraid to help out some less code-savvy customers.

I’ll be passing this feedback on to our Product team, which may help influence their decisions for which features they’ll be working on in the near future.

Thanks for chiming in here, Andi, keep the feedback coming! ✌️


Love it! So useful! I know just how I’m gonna use it! 😎

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

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!)

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

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

  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):

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??

Hey there! The script works fine and looks really nice.

I wanted to have more than collapsible page section. Can this script only be used once?

What is not clear, is that do I just add more elements to the same JS code or do I paste the code again?


I managed to applied the script and it works. I would be interested to have multiple collapsible parts. How do I do that? I tried multiplying the code and adding it as new JS but it just messed up the page. Can you pls help?

Userlevel 7
Badge +1

@Noah this script is 💣 !!!

Thanks so much for sharing this! We’ve been looking for an easy workaround like this for a while now!

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

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?

Userlevel 6
Badge +3

Yet another AWESOME script @Noah!!! 🙌🏾

Hey, Noah do you know if this is any further along. I also need to use multiple collapsible pages. I was going to use the tab script as a workaround but that doesn’t work on mobile

Userlevel 5
Badge +2

Hi @Mercedes_Maynard -

You could maybe try an accordion section?
Something like this could work for what you are trying to create: https://codepen.io/abergin/pen/ihlDf


Userlevel 3

Hey Linda, thanks for reaching out! 🙂 Unbounce does not currently offer password protection for pages or page sections, so it would be a little tricky to offer you a solution that is Unbounce specific. The main issue is that in order to setup a password on our pages you would need to upload an HTAccess file to our servers which is not something that Unbounce currently supports. I’m sorry to be the bearer of bad news here Linda! Still, I’m happy that you enjoyed this workaround and thank you for contributing to our community! Hope you’re heading into a brilliant weekend! 💪 🎉 

Userlevel 3

Hey @dipankar27, thanks for posting! :) This script only works for 1 section per page, when trying to use it across multiple sections on the same page the same functionality is not always guaranteed. We cannot help you modify custom code, however, f you’d like to share your exact setup here with the community then with a bit of luck a community member with a little more coding knowledge than our support team can chime in and help you out! 🎉 I hope you have a great day ahead @dipankar27 and thank you for being an active member of the community! 

Thanks @Michael_McInnes1.

I just want the same collapsible section to work on 2 or more section in same page.

Here is the code:

//Replace with ID of your collapsible page section
var toggleSection = $('#lp-pom-block-3241');
//Replace with ID of box containing hidden/visible content
var toggleContent = $("#lp-pom-box-3242");
//Replace with ID of button that toggles section
var toggleButton = $("#lp-pom-button-3240");

// Height of section to show/hide
var sectionHeight = $(toggleSection).height();
//Top value of content
var toggleContentTop = toggleContent.position().top;

toggleSection.css("display", "none");
toggleContent.css("display", "none");

var otherSections = toggleSection.nextAll();
var otherContent = toggleContent.siblings();

var shown = false;

var moveStuff = function(){
for (var i=0;i<otherContent.length;i++){
var content = $(otherContent[i]);
var contentTop = content.position().top;
//Is this element below toggleContent?
if( contentTop > toggleContentTop ){
var newTopValue = contentTop + sectionHeight;
content.animate({top: "+=" + sectionHeight + "px"}, 600);
$("#lp-pom-root, #lp-pom-root-color-overlay").height(function (index, height) {
return (height - sectionHeight);
shown = false;
for (var i=0;i<otherContent.length;i++){
var content = $(otherContent[i]);
var contentTop = content.position().top;
//Is this element below toggleContent?
if(contentTop > toggleContentTop ){
var newTopValue = content.position().top - sectionHeight;
content.animate({top: "-=" + sectionHeight + "px"}, 600);
$("#lp-pom-root, #lp-pom-root-color-overlay").height(function (index, height) {
return (height - sectionHeight);
shown = true;

//Run moveStuff to adjust content on load

toggleButton.click(function() { // ID of button/trigger
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0002-03-059


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!

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!

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.

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

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.

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

I changed all the ids (box, block, button) from the git script.

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


The answer is before body end tag.