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.http://forum.bubble.io/t/collapsable-width/60221
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() {
$(“#position-relative”).parent().css({“position”:“relative”,“left”:“”});
});
I understand that I have to tweak the code and make it this:
$( document ).ready(function() {
$(“#position-relative”).parent().css({“position”:“relative”,“right”:“”});
});
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.)
I wish I had the time to test it out and work through it for you.
If you have followed the steps in the other post and it doesn’t work, unfortunately it may just be the floating groups.