Moving Clases with Js

Design help Animations & Interactions
1

Hej Forum :slight_smile:

I’m trying to move a div inside a div by code (js).

In my example I want the class “move this” to be moved up inside the div “wrapper” (overflow hidden) when the button inside of it is clicked.

I’ve seen a lot of tutorials but still can’t make it work.

How can I do this?

Here is my site Read-Only: https://preview.webflow.com/preview/move-things?utm_medium=preview_link&utm_source=designer&utm_content=move-things&preview=02dc47e736d2f283ea43977078a35b3d&mode=preview

2

Hi @stupid!

You can select the ‘wrapper’ element by document.getElementById('elementid'), and set it to a variable.

Store in another variable the element you want to move inside the ‘wrapper’ element.

Then make a function to show the element inside the ‘wrapper’ element. elementWrapper.appendChild(elementToShow).

And set a event listener to the ‘wrapper’ element calling the funciont elementWrapper.addEventListener('click', function(){}).

Hope it helps :slight_smile:

If not, can you show the code you are trying to make?

1 Like
3

Wow, that seems easy. Imma try. Thank you :slight_smile:

4

@Andre_Pascal_Fuentes I’m trying so hard but I’m such a noob. I don’t even know, where to place the code. Can you explain a little more?

Thanks so much :pray:

5

Sry @Stupid, i understand wrong.

You can do it with interactions…

image
image1852×806 79.5 KB

The first button you put move ‘x’ px up. And then make another interaction in the second button, and put move 0 px. It’ll go to the initial place.

6

Hej @Andre_Pascal_Fuentes , thanks for the instructions and for taking the time. Now how can I do this by code?