Show an element buy pushing another element to the side

I have a re-usable element created. It has 3 floating groups (A, B, C).
(See picture below)

I am using this re-usable element on a page.
When the page loads, only A is visible. The idea is that when I click on an icon in A, C should become visible right next to it (I am using animation to make it look smooth). When I click on C, B should become visible in between A and C by pushing C to the left.

I found a post on this forum regarding the issue of collapsable width.

The solution provided was to add this particular code into the page HTML header and give the element an ID (which is “position-relative”).
The code:
$( document ).ready(function() {

I understand that I have to tweak the code and make it this:
$( document ).ready(function() {

My question is:
a) Do I need to add this code in the page HTML header or can I work with an HTML element inside my re-usable element?
b) What steps do I need to follow to make this work. (Please give me exact steps to follow I do not know how this works at all.) Please Help.

a) Yes - Page HTML header
b) Since you’re dealing with floating groups, I’m not sure it will work :frowning: I wish I had the time to test it out and work through it for you.

Recently, I’ve been moving away from trying to get collapsing to work in different designs and instead changing my design so I don’t have to have collapsibles. I know that’s not what you want to hear and it doesn’t help :confused: If you have followed the steps in the other post and it doesn’t work, unfortunately it may just be the floating groups.

Thanks Buddy!
I have switched to groups.
I was on a free plan that’s, why it wasn’t working though I followed the steps exactly.
I will leave it as it is and get back to it when I buy a plan.

This topic was automatically closed after 70 days. New replies are no longer allowed.