Always difficult to state what you want exactly. The video does show the item hidden until the button is clicked but all the data toggler does is remove the .is-hidden class. So the hidden item just jumps into the page - which is pretty ugly. I wanted it to animate in (slide) smoothly. I could not get the data-animate attribute to work with data-toggler in the order I wanted. Wayan Jaya solved that for me by suggesting I changed the layout - display - more - to 'none' . Now the animation is working - the item is hidden on page load and animates in on a click. Although I have to adjust the Z-index to make it animate in from behind the clickable item rather than over it. I have no idea why that makes the animate attribute work in the order I want - Wayan Jaya is a obviously a far better RSD operator than I will ever be!

Ok I discovered something
The opp has attribute about "data animate = slide-in-down slide-out-up"
this is what seems to be stopping the container from working if you use the class "is hidden"
but if one uses individual animations (data-animattion-in = "slide-in-down) (data-animations-out = slide-out-up"
then that works ...!!! go figure that out

so now you can use the class "is-hidden" for the data toggle container, but to get it to appear.dissapear as the op wants, then one needs to remove the attribute "data animate" and replace it with the attributes as above don't ask me why it has to be this way, I don't really know & am not really bothered why, enough for me to just know it works that way

so there are now 2 choices,
either set the container "JP" to display = none" as first suggested

or set the container "JP" to class "is-hidden"
add the value "is-hidden" to the "data-toggler"
&
replace the attribute "data animate" with the "data animations-in" & "data animations-out" as above

once again I don't know the why's only the "how to's

You have the right idea using the data-toggler to toggle a class but I would not use the animations of Foundation as they are somewhat limiting. Use the power of SD4 transitions and you can do anything you want with movement, opacity, etc.

I used the example class .expanded from the Foundation docmentation for the data-toggler. I created it by adding a new element state dynamic class called .expanded. When .expanded is selected I set the home state. In regular state I set the offscreen state. Add the transitions which can be directly targeted if you like for different timing effects and easing effects.

You can even target multiple id's and have lots of containers, elements, flying all over with one click of a button !
(Just make sure your id's list do not have a - in any of them or it will not work)

For those users of Materialize, Bootstrap 4, and Vanilla you can add the same feature that Foundation 6 has (Toggler) by simply adding this plugin. It has a few more features too...

https://github.com/maliMirkec/Classily.js

That's really useful. Thank you.