[How-to] Create a Collapsible Page Section

Show first post

105 replies

D

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!

kiddswoosh

I have tried to use this script for my landing page I have followed the steps, but for some reason, it isn’t collapsing my section. Here is my link http://unbouncepages.com/financialeliteservices/

Noah
Userlevel 7

Hey @kiddswoosh, looks like you are missing a toggle button and your IDs in the script need updating (steps 3 + 5). Hope this helps point you in the right direction!

Tim_Corlett

Hey @Noah I’m having issues on mobile and it looks like your demo site is too. Positioning of elements is all over the place. Do you happen to know a fix for this? https://www.dropbox.com/s/zf12wj9kozyt5th/Screenshot%202017-03-09%2017.59.49.png?dl=0

Noah
Userlevel 7

Hey @Tim_Corlett, I’ve done some testing and it appears to be working on mobile as expected. Could you direct message me with some browser/device specs to help me try to recreate what you’re seeing?

Matthew1982

Hey Jess, Any plans to implement a toggle feature in the tool box? Walls of text are conversion killers and toggle feature is a must have. I run across many cases where I would use this, not just FAQs. Examples: Showing a preview of a review with a “read more” link that expands the rest of the review, product information (ingredients, instructions, ext.), or just on general sections of the page that have in depth information.

O

Hi @Noah … I am having trouble making this work on mobile. Desktop works fine… except that the grey bg stops when collapse is open.

http://unbouncepages.com/training-template-2647102786853/

button is Testimonials

My mobile version is a completely different bunch of sections. Effectively, I need a another instance of the Javascript … with different IDs for section, box, and button … but this did not work.

What’s the solution?

Thanks,

Oliver

J

Hi @Noah …thanks for the code; it works great! I was wondering though if there was a way to have the “toggle button” ONLY reveal the collapsed section and then have another button (like a minus sign) available in that section that would then collapse it?
Thanks,
James

I

Hi James,

you mean like having a Hidden Collapsible Page Section triggered by a Button and inside having a Collapsing Divs? Like here shown ?

I just found something about the collapsing Divs HERE, but will be awesome if the Unbounce Experts could explain a little more how to implement it, because only with the CSS code can be harder than normal.

Please PM me, or contact me, or just answer here if this is actually possible: Collapsible Divs inside a Collapsible Page Section. And how to implement them?

Thanks

I

Hey Jess!!

Could you please help me little further with the implementation of Collapsible Divs?
Thanx 😃

I

Hey Noah!
Thanx for this feature. Is super useful.
I still need some help with this awesome code, because isn’t working on my LP.

I put the collapsible section exactly below the Footer, but when the section expands, all the elements (text box, images…) in the footer stay in the same position and overlap the information that’s shown.

Is there something I missed? Or someone knows please how to fix that? Thank you 🙂

C

Hi @Noah, I’m having a similar issue to @ibrudap in that the footer is not correctly re-positioning. When you click to either expand or re-hide the collapsible section, the footer slowly jumps up the page. I’d love any tips into how to fix that. Thanks!

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

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?

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.

Reply


Terms & ConditionsCookie settings