Overlay two elements directly on top of one another within a column

Support
#1

Hi,

I want to use jquery to transform a small amount of text (bottom right in the pic) into a larger amount of text (top right in the picture) when I click on the + button below:

I have one element fading in and another fading out correctly, but the problem is that they are not directly overlaying each other, so the section looks a bit strange and so does the transition as they don’t transition directly over each other.

How can I position them directly over the top of one another?

Any advice would be greatly appreciated!

#2

Hi There,

Thank you for writing in, while that is outside the scope of support, I could point you in the right direction with the understanding that it would ultimately be your responsibility to take it from here.

You can use the CSS Position property, you can do position: relative; to your elements container, and position: absolute; to the elements. You need to put both element in the same position (top, right, bottom, left) so they’ll overlap each other.

Cheers!