[How-to] Create a Collapsible Page Section

design
ui

#43

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?


#44

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?


#45

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


#46

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!


#47

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?


#48

@Noah do you know any way around this?


#49

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.


#50

Hi @Mercedes_Maynard -

You could maybe try an accordion section?
Something like this could work for what you are trying to create: https://codepen.io/abergin/pen/ihlDf

¯_(ツ)_/¯


#51

Yeah, that worked for what I needed.


#52

Hey,
I know that this script only works for one section per page, but can it be adjusted to work for more sections/boxes? I’d like to create a collapsible FAQ section.


#53

Hi, @Noah

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

Thanks!


#54

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");


#55

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.


#56

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


#57

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


#58

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” …?


#59

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


#60

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.