Skip to main content


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

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.


https://book.cloudninefertility.com/ivf-center-fertility-hospital-bengaluru/

I was trying to create two collapsible section with two separate code, but it’s not working.

Please help!


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:

<script>
//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();
console.log(otherContent);

var shown = false;

var moveStuff = function(){
if(shown){
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;
}else{
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
moveStuff();

toggleButton.click(function() { // ID of button/trigger
toggleSection.slideToggle('slow');
toggleContent.slideToggle('slow');
moveStuff();
});
/**
* Do not remove this section; it allows our team to troubleshoot and track feature adoption.
* TS:0002-03-059
*/
</script>

 


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:

HTML:
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>
</div>
<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>
</div>
<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>
</div>
</div>
</div>

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 */
}
</style>

Add JavaScript for Interactivity:

<script>
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';
});
});
</script>

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. 


Reply