[How-to] Create a Collapsible Page Section

Show first post

105 replies


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…

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

Yeah, that worked for what I needed.

Hi, @Noah

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


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

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

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.

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.


Userlevel 7
Badge +1

@Zoe_Tattersall you’re amazing!!! 😍

Userlevel 6
Badge +3

You’re too kind! Just thought it might help some others get the most out of their Sticky Bars right now ☺

Side note: probably should also mention there is additional CSS added to for this particular design – on the website that it’s on, I’ve added the below CSS to remove the background, position it and remove the standard close button:

.ub-emb-iframe-wrapper .ub-emb-iframe {background: transparent !important; box-shadow: none !important;}
.ub-emb-bar .ub-emb-close {display: none !important;}
.ub-emb-iframe-wrapper {margin-bottom: 60px;}

lowkey frustrating that this is a script from 2017 that still gets views and comments to this day and most of them are with a problem that no one from Unbounce seems able to adress or help with:
Multiple collapsing sections.
I myself thought this would be a great add for a FAQ yet it did not work, as duplicating the script only overwrite the variables.
I work with C# so i’m not familiar with a lot of syntaxes of javascript. Are there an equivalent of arrays?
These workarounds should be built using whatever is the java equivalent of arrays, so that they can easily scale by letting the user only change the size of the array and dumping in all the needed IDs.
This is the third “workaround” script i’ve found where I wanted to use on multiple elements and wasn’t able to.

@Peter_Czepiga, select the option ‘Before body End Tag’ for the javascript


Hey, I’m thinking about buying this, but want to apply it to large sections chalked full of images/text/colors/etc. Will it work for this application as well? See page here - https://online.homeusa.com/portfolio/

Hi, for this functionality I wouldn’t recommend using this script. It’s possible to do it, but it requires a good understanding of HTML and CSS to set it up as you would like.

I use this code and works perfect.

Now I have a question. How can I use it multiple times in the same landing? I’ve tried duplicating the code and change all variables (adding a 2 at the end), and the collapse efect works perfect on the first section, but it doesn’t push the second section’s siblings.

Does anyone know why this happens?

Hi Gaston,

It’s possible to have 2 FAQ menu on one page. However, the FAQ menus are not interconnected with each other. If the user opens the first item in the first FAQ menu and then scrolls down to the second menu to open an item there. The first item of the first FAQ menu stays open.
This is done by design because otherwise, the user would experience strange behavior in the browser where suddenly the text moves up because the first item of the first accordion closes.


I’m suddenly having an issues where when you click on the button that expands the hidden section, it opens but then quickly closes and moves you back to the top of the page. I thought it might be a conflict of scripts, so I tried stripping out all of them and just using the collapsible section script, but still got the same results.

It works fine in preview mode, but when published it breaks. I’ve compared to other pages I’ve used this on, and everything is the same as those. Any ideas? (page in question: https://online.uncpn.com/)

In this part of your code:
<a class="lp-element lp-pom-button" id="lp-pom-button-783" href><span class="label"><strong>Locations &amp; Providers ▼</strong></span></a>

You have ‘href’, it should not be there. Because this will reload the same page.

I don’t know if you can remove this, maybe you had a link in this element before?


That seems to be something that Unbounce or one of the scripts is throwing - I created a brand new button and got the same results. I wonder if something has gone wonky in this particular page (since it’s working on other pages)? I might have to try re-creating the page from scratch (which is super frustrating). 😦

Hi Noah - is this still the case today?

Would really love to be able to do multiple sections!

Userlevel 1

Hello everyone!

I was struggling with this as well initially and read through this entire thread trying to figure it out. Gave up and went my own way. Here is the code and instructions if anyone else needs it:

Here's a step-by-step guide:

  1. Access Your Unbounce Page:

    • Log in to your Unbounce account and open the landing page where you want to add the accordion FAQ.
  2. Insert a Custom HTML Widget:

    • In the Unbounce editor, drag a Custom HTML widget onto your page and area where you want the FAQ section.
    • Click on the widget to edit it.(It should pop open automatically)
  3. Add the HTML and CSS for the Accordion:

    • You'll need to write some HTML and CSS to create the accordion effect. Here's a basic example:

Replace the “Question 1” etc text with a question, and the “Answer 1” with the answer. Continue for more questions/answers.

<div class="accordion">
<div class="accordion-item">
<button id="accordion-button-1" aria-expanded="false"><span class="accordion-title">Question 1</span></button>
<div class="accordion-content">
<p>Answer 1</p>
<div class="accordion-item">
<button id="accordion-button-2" aria-expanded="false"><span class="accordion-title">Question 2</span></button>
<div class="accordion-content">
<p>Answer 2</p>
<div class="accordion-item">
<button id="accordion-button-3" aria-expanded="false"><span class="accordion-title">Question 3</span></button>
<div class="accordion-content">
<p>Answer 3</p>

CSS(And some basic CSS to style it):

<style>.accordion {
/* Style for accordion container */
.accordion-item {
/* Style for each item */
.accordion-content {
display: none;
/* Style for the content */

Add JavaScript for Interactivity:

document.querySelectorAll('.accordion button').forEach(button => {
button.addEventListener('click', () => {
const accordionContent = button.nextElementSibling;
button.setAttribute('aria-expanded', button.getAttribute('aria-expanded') === 'false' ? 'true' : 'false');
accordionContent.style.display = accordionContent.style.display === 'block' ? 'none' : 'block';

For Javascript:
Ensure that the Javascript goes under the Javascript section. You must also include the <script></script> tags in Unbounce. “Before body end tag” is also fine for the script.

For Stylesheet:
CSS *must* include the <style></style> as well.

Please note I am a complete noob, but this works perfectly. 


This is awesome!  Is there any way to password protect the dropdown box?



Thank you!  No worries!  You all have a wonderful weekend..!


Great script! My button design has a + and - as per client request. Is there a way to get the button to go from " + " plus symbol to " - " when it's clicked upon expanding the section? And vice versa for closing it. Thanks in advance!

Userlevel 4

Hi @parkmyvan ,


Whilst you are able to alter the button styles (colour, border etc.) natively in the builder, there’s no simple way to change the button text. To achieve that, you’d need to use some custom code to your page. This is a little outside the scope of my ability, although I did find this webpage showing you how this could be achieved using some Javascript.


Sorry I couldn’t be of more help with this, but I hope the above link can assist you in achieving your goal.