I am trying to animate items to appear on a click using data-toggle / data-toggler. I can get items to animate in and out but all animations seem to start from the 'in' position. I would like the item to be hidden until the button is clicked. Grateful if anyone can point me in the right direction. I've tried all sorts of variations but just can't figure it out.

The basic button hiding a picture (rather than revealing it) is shown on the blank.html page of the attached file.

Grateful for any help

JP

Try comparing what you have done to one of the components in the library there are a few in there. I'm on. My phone at the moment so can't check your file out. .

Looked at most of the toggle versions. Most are dropdowns, menus or something similar rather that animating an item in and out of view - so either don't use the data-toggler attribute or use specific foundation classes.

see if this helps...it is coffeecups youtube... https://youtu.be/JVJxCyyhnt8

You can make it jump in and out of view (on click) using data-toggler and the ".is-hidden" class (as shown in the video). Or you can make it animate out of view (it is visible to start with on page load and is then hidden on click) and then animate back in again. I'm using data-animate & slide-in-down and slide-out-up. But I would like it to be out of view (hidden on page load) and then on click animate in. Unfortunately the video doesn't cover animate or how to change the animation order (animate in first, then out............rather than animate out, then in).......and that is the problem I can't solve
.

You actually have to make the container with the ID JS "none"
go to the layout tab, "display" slide on over to "more"
choose" none" from the dropdown menu

Lile this ? (or am I still misunderstanding

don't use the class "is-hidden" that now permanently hides the container,

I think that video was made ages ago

That appears to do it! Thank you. I have no idea why that works and I would never have found it.

per the op he wants it hidden until it is clicked " I would like the item to be hidden until the button is clicked"..that is what the video does. Or am I missing something?

Don't know if you are missing something, maybe that foundation class has changed how it works,


doing it the way I suggested works the way the op wants it to work

The other thing is that the theme "technologic" being used in the video is no longer like that, they have changed it to something more up to date