[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

M

Yes, there is. Just copy the script in another Javascript section. Afterwards you need to replace the variable names for section, box and button -> not only at the top, but also in the whole script!
E.g.:

var toggleSection2 = $(’#lp-pom-block-99’);

var toggleContent2 = $("#lp-pom-box-100");

var toggleButton2 = $("#lp-pom-button-103");

Alan_C
Badge +1

Hey @maxl, would you be able to share what parts need edited if there’s more than one drop down? I can’t seem to get it to work properly.

Finge
Userlevel 6
Badge +4

Hi @maxl - what do you mean by “in the whole script”. Where else to change variables?

Finge
M

Hi @Finge,

what i did:

  1. Use the existing script in a Javascript TAB (CollapseJS_1)

  2. Set the variables accordingly within the script to your wishes “#lp-pom-…”

var toggleSection = (’#lp-pom-block-99’); var toggleContent = ("#lp-pom-box-100");
var toggleButton = $("#lp-pom-button-103")

  1. Add another Javascript TAB (CollapseJS_2)

  2. Paste the code of CollapseJS_1 there

  3. Replace the variable itself in the whole script - not only at the top…!
    var toggleSection2 = …;
    var toggleContent2 = …;
    var toggleButton2 = …;

  4. Set the variables to the desired part of your page

raget

Hi @maxl, I tried this solution and it worked half ways.
Do I need to change only “toggleSection”, “toggleContent”, “toggleButton” every time they appear or other properties like “sectionHeight”, “toggleContentTop2” …?

Kaitlyn_Shriver1

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

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.

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!

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?

sleighty

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

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?

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

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

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

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?

M

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

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

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!

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

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!

nirajansth

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

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?

Jeff_Collins

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

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 ?

R

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

Reply


Terms & ConditionsCookie settings