[How-to] Create a Collapsible Page Section



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


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!


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


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!


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 :wink: #goodluck


Yet another AWESOME script @Noah!!! :raised_hands:t4: :raised_hands:t4: :raised_hands:t4:


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.


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


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.


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


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?


Hi, I’m having this issue with the background! Before the “Locations & Providers” button is clicked you can see the entire page background is gray, which is what I want. But when you click the button to reveal the hidden page section, the background turns white part way down the page as you can see in the 2nd screenshot. Also, when you toggle the button, the white stays. Does anyone have a workaround for this? Thank you so much!

Screenshot 1 - how the background should look: All gray

Screenshot 2 - the problem seen here… background turns white…


Can someone help me with my setup? It’s weird, but what happens is, depending on what view I’m currently on when I save the page (desktop or mobile), that view will look good, and the other view will look weird. I’m not sure why that happens, but that’s what happens. :frowning:


Okay, so I just realized the script works like this:

You can’t use it for both views. Meaning, the function on load optimizes for the view that it’s currently in. If you load in on mobile, it will look good on mobile only. If you load it on desktop, it’s optimized for desktop only. Whew. Good thing I realized that early. >_<


Hi @daneloctober,

Your scripts load only 1 time when the page itself loads.

Adjusting your browser’s viewable area won’t reload the page.
You have to either adjust AND reload the page or better yet test the mobile view on a real mobile device.




I am having issues implementing the script. what step am I missing?


Hey fam!

Can someone help me see what I did wrong? http://unbouncepages.com/test-awingu-adwords/

The script works fine but when the section is expanded, it “runs-through” the content in the next section…