#2139

henriharbor
Participant

thanks Abanob ~ I appreciate your help!
I only wanted to show the element ~ a google map ~ id~ google-map ~ your code toggles the map ~ so I played with it and this is what I got ~

in site css ~
.google-map{
display: none;
}

On the Elementor Panel ~ Edit Premium Button ~ in “Content” Tab *(I am being real specific on each step here to maybe be helpful to others who want to do the same)

1. Leave the Link Type~ Link ~ Blank
2. at the bottom of the “Content” panel ~ set onclick Event to “Yes”
3. in the onclick code Field ~ insert javascript (modified from your example ~ just to show (hidden) Element…

document.getElementById("google-map").classList.toggle("show");

4. set Element Id to “google-map”
5. Css under “Appearance/Customize/Additional CSS” in WordPress Admin (using Embark Theme which has a custom CSS option I put the css to hide the google-map element
.google-map{
display: none;
}
6. set a nice fade in animation (Elementor Panel)~ on the section containing the google-map element ~ just for fun!

It Works! YAY!
*** I guess there might be a different javascript action instead of “toggle” to use just to hide (and not toggle) ~ but hey ~ it’s working!

Thanks again Abanob ~ and thanks to Leap13 for offering such a great collection of Elements for Elementor! They are truly ~ Premium!!!