This topic contains 9 replies, has 2 voices, and was last updated by  Abanob 3 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2136

    henriharbor
    Participant

    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!

    #2137

    Abanob
    Keymaster

    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

    • This reply was modified 3 months, 3 weeks ago by  Abanob.
    #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!!!

    #2140

    Abanob
    Keymaster

    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

    • This reply was modified 3 months, 3 weeks ago by  Abanob.
    • This reply was modified 3 months, 3 weeks ago by  Abanob.
    #2142

    henriharbor
    Participant

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

    #2144

    Abanob
    Keymaster

    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

    #2145

    henriharbor
    Participant

    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");

    #2146

    Abanob
    Keymaster

    Hello henriharbo,

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

    Thanks,
    Abanob

    • This reply was modified 3 months, 3 weeks ago by  Abanob.
    #2148

    henriharbor
    Participant

    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

    #2149

    Abanob
    Keymaster

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.