I'm trying to create a button with dual functionality - when clicked, the button should disappear and a hidden p-tag (with display: none;) should become visible.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
</script>
</head>
<body>
<p class="phonenumber" style="display: none;">0271 12222</p><button class="call-us">Call us</button>
</body>
</html>
While this code functions perfectly on the w3schools testing tool, it doesn't seem to work on my live website.
My .js file (button-phone.js) includes the following code:
(function($)
{
$("button.call-us").click(function(){
$(this).hide();
$("p.phonenumber").show();
});
});
(jQuery);
The script is included towards the end of the code, just before the closing body tag
<script type='text/javascript' src='http://example.com/wp-content/plugins/button/js/button-phone.js?ver=1.0.4'></script>
I have imported the jQuery library in the head-tag
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.11.2'></script>
HTML
<div class="wpb_wrapper">
<p class="phonenumber">555 000 000</p>
<p><button class="call-us">Call us</button></p>
</div>
CSS
.phonenumber {
display: none;
}
Although the p-tag remains hidden, clicking the button doesn't trigger any action. Any insights on what might be causing this issue?