[How-to] Create a Collapsible Page Section

Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

community tips scripts banner

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:
http://landingpage.noahmatsell.ca/collapsible-section/

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:

https://gist.github.com/noahub/762ca1dae00861c5265fa9a679c35953

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:

Testing

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

T

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.

lindspire

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

56 PM

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

J

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.

J

The answer is before body end tag.

DPFMG

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

AnnaHajas1990

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?

Thanks
Anna

AnnaHajas1990

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?

Tiffer
Badge

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

image

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

image

daneloctober

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

daneloctober

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

Hristian
Userlevel 7
Badge +3

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.

Best,
Hristian

Hristian K. → experimentation-as-a-service → https://www.revise.agency/
Andisha_Hoilett

Hi,

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

Yash

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…

Thanks!
Yash

R

Hello, does this script work for more than one section on the page? I’m having trouble getting used that way.
I only tried one section but still overpowers me from the down section. Does anyone know how to help?

Allison_Otting

Hello! I’m having an issue where the reveal button is trying to load an /undefined link, which takes me to a 404 page. I have a sneaking suspicion that this has to do with the fact that we’re using the Wordpress plugin, but I’m not 100% sure.

I’ve tried putting this in the “link” area on the button:
javascript:void(0)

And our developer tried tweaking the code to tell it “HEY, IGNORE THIS LINK,” but none of it worked.

Any ideas?

C

Hey I’m having an issue where the positioning of all my elements is completely broken on mobile after implementing this code. Making this code unusable for me as mobile optimization is more important. However, if anyone has a fix it would be greatly appreciated

L

Hey, does anybody know if there’s a way to hide a “read more” button once you click on it and displays the collapsible section? Thanks!

M

Hey there, I’m trying to create an FAQ section where each question has a section that opens below it if you click the + button, with this code I can only open the most recently added question no matter what button I click on.

If I have four questions then the fourth one is the only one that opens even if I click on the button for the first question. Same thing if I only have two questions. Why is this happening and how do I get around it?

M

@Noah do you know any way around this?

Noah
Userlevel 7

Hey @Mercedes_Maynard, sorry I don’t have a solution for this at the moment. This workaround can only be used for one section on a page.

Caroline
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

¯_(ツ)_/¯

M

Yeah, that worked for what I needed.

J

Hey,
I know that this script only works for one section per page, but can it be adjusted to work for more sections/boxes? I’d like to create a collapsible FAQ section.

B

Hi, @Noah

Are there any updates on this script?
I need to use this script twice in the same page. Is there any way?

Thanks!

Reply


Terms & ConditionsCookie settings