Unbounce buttons - collapse and re-hide text


#1

Hello!

I have searched low & high and am yet to find a simple method for using Unbounce buttons to collapse and re-hide text. I am hoping some of you coding ninjas will be able to help!

I am currently working on a page which has x3 price plan (columns). There is a ton of information and elements in each package, and on mobile, this would be a nightmare to scroll through.

This page examples exactly the effect I am trying to achieve. 

Like the above example, what I would love is when the first button is triggered to reveal the text, the remaining collapsible buttons (underneath) drop bellow the revealed text, as well as return to the original position when the user clicks the button again to hide the text.

This is the page I am currently working on. It may give you a better idea what I am trying to achieve. 

I have found some basic scripts online, but integrating them with Unbounce elements is beyond my technical skills… (newbie)!

Thank you in advance. 

Jack W


#2

Hi Jack, 

You’ve seemed to have stumbled onto one of the few hard challenges an Unbounce page might present. 

At the beginning of the year, I was at the same place when trying to find a solution for one of my clients.

Unfortunately nothing out of the box would work due to the way Unbounce pages are inherently structured and build. 

However, after dozens of hours my company managed to get it working. The only collapsable section implementation for an Unbounce page that I’m aware of. 
Our intention is to eventually release it as a paid script but in the mean time we do implement it for our clients. 

If you truly think collapsable sections would make a difference for you page, please feel free to contact me at: h+support@revise.cc and I’ll provide a quote for you. 

Best,
Hristian

P.S. A simple pointer for anyone looking to implement a solution like this would be to account for how page sections are built. You need to write a script that listens for elements movement and adjust everything below/above.


#3

Hi Hristian,

Thank you for your response, however I have done some digging online and appeared to have got something working. 

Please use the previous (above) link to preview the page. If I can get this working, I won’t worry about the column background behind.

The coding I have used for the text is:

+ LEVELS





 



  



  





 Level 2 Gym Instructor Level 3 Personal Trainer



  











  





 







+ RECOGNATION





 



  



  





 REPs Level 3 Status City & Guilds Accreditation Association for Nutrition (AfN)



  







  



  





 







+ MODULES





 



  



  





 Exercise for Fat Loss Circuit & Core Training Functional Equipment Training Behaviour Change Coaching



  











  





 







+ PROGRESS





 



  



  





 Guaranteed Interview

 Career Accelerator Package

I also had to had these few lines to the custom CSS Stylesheet section:

" rel="nofollow" target="_blank" title="Link http//maxcdnbootstrapcdncom/bootstrap/337/css/bootstrapmincss">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">;" rel="nofollow" target="_blank" title="Link https//ajaxgoogleapiscom/ajax/libs/jquery/1124/jqueryminjs/script">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">;" rel="nofollow" target="_blank" title="Link http//maxcdnbootstrapcdncom/bootstrap/337/js/bootstrapminjs/script">http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">

There is a slight issue though…

Here you can see how the Unbounce buttons look before putting the coding in. This is how I have formatted the buttons when creating them.

This is how the buttons look after placing the code in. The text size is automatically reduced significantly in size, which I do not want effected.

Also, how do I go about styling this new element? I would like to maybe change the text size, colour, font and background colour?

Final question, is it possible to define the width? As you can see on the page, the section is cut off early (right hand side) because I have set the HTML box as the same width as the column behind. I would like the section to fit neatly with the border matching the column like how the section stars on the left.

Hopefully that all makes sense!

I appreciate any help.

Thanks,

Jack


#4

Hi Jack, 

The solution you are referring to applies to using an HTML element/box to place code to be rendered on the page. 

Although a valid solution that can work, it has a few serious shortcomings:

  • No way to style/adjust the content. When you need to change something, you need to do it with code and not through the builder.

  • The HTML box is just a box that is fully functional on a published page. You can’t see the actual content of the box in the builder. 

  • It can overlap or break other elements on the page. 

The solution I was refereeing to initially actually allows you to build everything from inside the Unbounce builder. Styling and placing the content, adding other elements like buttons, links, etc. 

The preview link for your page doesn’t seem to show any changes, later referred in the screenshots, so it’s kind of hard to troubleshoot. 

However, it’s most probably a CSS issue. 

Best,
Hristian

P.S. Also, shouldn’t include the JS libraries in the CSS panel. They should be linked properly in the JS panel with the appropriate placement.