Requesting Code example to use Premium Button to Show hide an Elementor element

[henriharbor]

Could you guys please give some example of how to set up a premium button with javascript to show/hide a section/element ~ I have been trying to work it out but haven’t had any success. My interest is to set a section to display:none; and then set up a button to show.
Thanks!

[Abanob]

Hello henriharbor,

hope you’re having a great day.

You can use Vanilla Javascript to perform this, here you are the steps you can follow to Show/Hide an element/section using Premium Button

• First, you need to get the Id or the class name of the element/section you need to show/hide
• Here you are, the code you can use to perform that

document.getElementById("your_id").classList.toggle("hide");

• Then, you can define this css property in your css file

.hide{ display: none; }

• Also, you can use class name to perform the same event

document.getElementsByClassName("className")[index].classList.toggle("hide");

If you have any questions, please feed me back.

Thanks,
Abanob

[henriharbor]

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!!!

[Abanob]

Hey henriharbor,

I’m so glad that everything is working well with you. By the way, I was wondering if you might able to help us as well? If you don’t mind, I’d really appreciate if you could rate Premium Addons for Elementor with five stars for the quality and support we provide.

You can Click Here Here to Rate us Now.

Thanks,
Abanob

[henriharbor]

ok ~ actually the element still toggles ~ but in the right direction ~ show ~ then ~ hide

[Abanob]

Hi henriharbor,

could you please clarify more? do you mean that the element is hidden by default and when you click the button it’s shown ?

Thanks,
Abanob

[henriharbor]

I will give a very positive rating ~

I pasted in the wrong code above ~ for that I get 3 Stars!!! Oi!
here is the correct code

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

[Abanob]

Hello henriharbo,

I’m not sure if you still have the problem, so please feed me back if you need any help.

Thanks,
Abanob

[henriharbor]

Thanks for keeping tabs of me ~ sorry for being so random ~
Everything is working fine ~ I just pasted in the wrong Javascript code when I gave my step by step ~

The Result (with the right code) ~ yes, the Element is hidden by default (edited CSS) ~ So when the button is clicked ~ the element show ~ since it’s a toggle when the button is clicked again ~ the element gets hidden ~ that’s ok ~ actually I made a second button and put it in the Google Maps Element ~”Close Map” same code as the first button ~ so folks can choose to disappear the map. Working quite well too.

Thanks again mate

[Abanob]

Hey henriharbor,

I’m so glad that everything is working fine with you. It would be a great appreciate if you gave us a 5 stars rating through this Link

if you have any other question, please let me know.

Thanks,
Abanob

[Author]

Posts