CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liu Kang
Liu Kang

Reputation: 1389

Hide button and show hidden p-tag on button click

I want a button with two functions when clicked; the button should vanish and a hidden p-tag (display: none;) should reveal itself.

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

The code above works flawlessly with w3schools testing tool.

But when I try to do it live at my website, nothing happends.

My .js-file (button-phone.js) contains the following:

(function($)
{
    $("button.call-us").click(function(){
        $(this).hide();
        $("p.phonenumber").show();
    });
});
(jQuery);

It's included in the code, far down, just before the body tag closes

<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 my 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;
}

The p-tag is hidden, but nothing happends when I click the button.

Any suggestions?

Upvotes: 0

Views: 5048

Answers (3)

Shehary
Shehary

Reputation: 9992

Change your jQuery to this and it will work

(function($){
    $(".call-us").click(function(){
        $(this).hide();
        $(".phonenumber").show();
    });
});
})(jQuery);

Working Fiddle

Suggestion, Try to bind jQuery with unique ids or class, don't use common class which you may use on other part of website

HTML

<div class="wpb_wrapper">
    <p class="phonenumber" id="PhoneNo">555 000 000</p>
    <p><button class="call-us" id="Call">Call us</button></p>
</div>

And jQuery

(function($){
    $("#Call").click(function(){
        $(this).hide();
        $("#PhoneNo").show();
    });
});
})(jQuery);

And CSS

#PhoneNo {
    display: none;
}

Working Fiddle

Upvotes: 1

CodingBee
CodingBee

Reputation: 141

Try editing your button-phone.js to the below -

(function($)
{
    $("button.call-us").click(function(){
        $(this).hide();
        $("p.phonenumber").show();
    });
})(jQuery);

Upvotes: 1

apaul
apaul

Reputation: 16170

Still a typo question... You have an extra closure, remove it and it will work:

Working example

(function($) {
  $("button.call-us").click(function() {
    $(this).hide();
    $("p.phonenumber").show();
  });
})(jQuery);
.phonenumber {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wpb_wrapper">
  <p class="phonenumber">555 000 000</p>
  <p>
    <button class="call-us">Call us</button>
  </p>
</div>

Upvotes: 2

Related Questions