I have a faq section in my footer. I’ve built a “click-an-arrow-to-display-answer-click-again-to-hide” functionality and that works like a charm.
However, when the group is extended, the parent footer height doesn’t follow to extend (and text is below the page height).
Is there a way to solve this that I haven’t thought about?
Have a look at my hidden groups and height demo:
or in the editor:
Edit: Give me a few minutes and I will add to it a FAQ type scenario you are working on 
@DaveA last time I had issues hiding elements you advised me about the collapse function. I was one click away from adding your name to above hehe.
This one’s slightly different though, because it’s not about hiding the element itself, but rather the parent, based on the child group visibility.
I’ll check your demo out when done updating.
Done updating!
Edit: Made a couple of adjustments to show you different options;
There are other things you could do, and you could also build this into a repeating group to pull a set of Q&A from a database, but you can experiment now!
I am not sure exactly what your query is, as i do not fully understand it regarding ‘parent’, if the element is not shifting the content down, then it cannot be on the parent properly, but floating above if you know what i mean. Does it show up correctly in the right position under the right parent in the element tree?
Look at my screen shot. The dark grey area is the parent element, which is the whole footer element. It needs to be shifted down when the group faq is extended. Parent groups don’t take into consideration what happens with children elements.
My solution (yours is the same) of faq hide/show works perfectly. It shifts down and collapses when shifted back. Due to above reason, the green text shifts below the footer element. Here the footer parent footer element should acknowledge that a child group is being expanded, and follow accordingly.
This is my problem. Makes more sense?
You haven’t set the footer as floating and relative to bottom. that should sort your problem. At the moment, the footer is just another group stuck on the page, not relative to anything.
You will need to play around with the groups and relationships to get everything to shift correctly.
You might have to put the whole FAQ section into a group and have the footer relative to the bottom of that group, but floating bottom should solve it.
I have updated the demo with the stock bubble footer and it moves correctly relative to the bottom of the FAQ section.
Thank you! Looked at it.
It’s fair you need to put the footer etc. inside a floating group to get it relative to the bottom.
My issue is that the faq section is inside the footer, and I’d like the footer to extend with the group element.
Ok, I just made some changes and replicated your problem, however it is easy to fix.
Make sure your footer on the page it is being used is sized to fit the fully expanded heights of the elements. Once you do this it works fine.
Take a look at my demo now.
Aha! I see now after reading your reply a couple of times. Got it to work.
Now the only thing left is to autoscroll if the page extends down. Right now, the page is extended (because the footer gets longer). However, there’s no scroll automatically adjusting to the height of the answer.
In your example, the Q and A are very short. If those would be longer, the text would extend beyond the screen height, and the user would need to scroll down to read the whole answer. This is very typical also for the last row. (when you collapse, the scroll adjusts to the screen, because the most bottom element is getting shorter). You have an idea here?
I guess perhaps you could solve it with workflows, but I haven’t tried it yet. Maybe you have a better solution?
Yes, Don’t put FAQs in your footer, they belong on a dedicated page!
haha. Noted lol. Point taken of starting to annoy. ;D
This particular case is about faqs and footer. The scenario, problem and solution, could however be presented in other situations, so the scroll could be important still.
Thanks for your help though! For some reason you’re always involved when there’s trouble with collapsing elements.
For others reading this topic, using collapsable elements in your footers, could be a bit messy. Especially if you use reusable elements. Then the full “experience” is governed by the settings of the reusable elements themselves, and the footer page. The reusable elements and the footer will most likely look a bit weird, as they will appear, in the editor, as much higher than what they will in preview and production mode (full height is displayed in the editor, real collapsed height will displayed in preview mode).
When you use reusable elements in a footer this way, think of the full child reusable element as layered on the parent element, and I hope that will help in seeing the logics in using collapsable elements in places in your apps.
