Elementor - Find the button code / reproduce the effect

neosan
July 25, 2021
139 views
1 vote
2 Answers

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.

like houzez does

Source page

I already have a code that was supposed to reproduce it..
but it doesn’t work (Uncaught TypeError: undefined is not a function)

I would like to know how to see or retrieve the code / script that houzez site uses..

on chrome dev I have a lot of trouble finding it ..

I know how to find css but not scripts .. don’t know if it’s already possible

Any help will be welcome

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

my configuration
clean install wp 5.8 + elementor free
0 plugin and modification

Update

thanks for your code i can’t get it to work properly

can you if possible test in the same dev environment as me? or any localhost dev

the fastest and easiest I use

laragon

wordpress 5.8

elementor free

you really have to see it the button can not understand what is happening .. it does the reverse and the button changes completely instead of the text only.

it will be necessary to be in the same environment .. I have the impression that elementor always complicates the most obvious and simple manipulations. he doesn’t want to listen to anything …

sorry to expose very boring problems to solve..

if only we could see or extract the script that houzez made to their button

Answers

Your function uses the $ function – which hasn’t yet been defined. you need to explicitly define it in your elementor WP site.

jQuery($ => { // DOM ready and alias in scope
  $('body').on("click", function(e) {
    let txt = "Call";
    if ($(e.target).hasClass('phone-reveal')) txt = $(e.target).data('number')
    $('button.phone-reveal').text(txt);
  });
});

body{
background-color:#333;
height:100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button data-number="123 345 565" class="phone-reveal">Call</button>

You don’t need any JS at all.
Only CSS :active and the ::after pseudo

[data-number]:active span   {display: none;}
[data-number]:active::after {content: attr(data-number);}

/* irrelevant styles - only for this demo to pimp it up a bit */
button {
  color: #6ec1e4;
  border-radius: 0.4em;
  border: 1px solid currentColor;
  background: none;
  padding: 0.5em;
  min-width: 10em;
  cursor: pointer;
}

<button type="button" data-number="123 345 565"><span>Call</span></button>

Please signup or login to give your own answer.

Click here to cancel reply.

Elementor – Find the button code / reproduce the effect

Answers