Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Hide button content with text

I’m looking for the jquery code that allows me to place "call" or "show number" on my elementor button because I need to hide the number.

enter image description here

like houzez does

enter image description here

Source page

I already have an old code that allows me to display a section and delete the button.. not very practical as an idea ..

I need to understand how to adapt it to just hide the number with text
I’m not comfortable with jquery there must be a better tip.

/*Remove Button After Show*/    
 jQuery(document).ready(function($){
        $("#MY_BTN").click(function(){ 
  $('#hide_content').slideToggle('250','swing','hide');
  this.remove();
        });
});
Tags:

2

Answers


  1. 0

    There is plenty of ways to do it. I would do something simple like the following.

    When clicking the button, the text will be changed to what is in the data-text attribute.

    HTML:

    <button data-text="123 345 565" class="phone-reveal">Call</button>

    JS:

    $('.phone-reveal').on('click', function() {
  $(this).innerText = $(this).data('text');
});
    Login or Signup to reply.
  2. 0

    You can try this. tested with jquery version 3.6.
    When click on button the number will show.

      <button data-number="123 345 565" class="phone-reveal">Call</button>
    <script>
        jQuery(document).ready(function () {
            $('.phone-reveal').on('click', function () {
                let phone = jQuery(this).data('number')
                jQuery(this).text(phone)
            });
        })
        
    </script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search