Need help showing div

JavaScript
1

Hi, @PaulOB can I ask for some help please

I want to show the div/buttons if I click the first green button or whatever button but my example is just the first button green. Now when the red buttons show and if I will click “back to step1”, it will hide the current (red buttons) and show the green buttons. but looks like the hide and show is not nice to look

How to use transform: translate();?

Here is my codepen

Thank you in advance.

2

The problem is that your three elements are in different vertical positions on the page which means that when you slide them they must first bounce back to the top and then slide which is why you get that jump effect.

If you absolutely position them all in the same space then they will slide better.

e.g.

.row > div {
  position: relative;
  min-height: 175px;
}

.green-wrapper,
.red-wrapper,
.orange-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

However that does assume that you are sliding fixed height elements and not some variable height content otherwise you won’t be able to control the flow of the document below. If you have variable height elements then you could align them horizontally using flex but hide the overflow on the main wrapper. Then you could translate each one in an out as required.

This is a *very old demo* and the closest I could find that shows the translation effect (I wouldn’t copy this code though as you probably want interactive content in your example which you can’t do using :target).

Also note that on my screen your little boxes poke out of the right side of the border because you have sized the outer in percentage but the inner elements in fixed px.

BTW I don’t think the cdn for bootstrap 3.4.1 exists anymore.

1 Like
3

Thank you, Paul :slight_smile:

BTW I don’t think the cdn for bootstrap 3.4.1 exists anymore.

Oh. I hope I can update the bootstrap version I used in my project.

1 Like