Conceal the button and reveal the hidden paragraph by clicking the button

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?

Answer №1

Looks like there is a typo in the code. You have an extra closure, simply remove it to fix the issue:

Check out the 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>

Answer №2

Here is a suggestion on how to modify your button-phone.js script:

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

Answer №3

Update your jQuery code to the following for it to function correctly

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

Working Fiddle

Recommendation: Use unique IDs or classes when binding jQuery to elements to avoid conflicts with other parts of the 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>

jQuery Code

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

CSS

#PhoneNo {
    display: none;
}

Working Fiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to include two AJAX requests within a single function that both execute when the same submission occurs?

Having one submit button for a function necessitates the running of two ajax functions when the submit button is clicked for validation purposes. <div class="form-group btn-group"> <input type="button" class="btn btn-link" v ...

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

All of the following code snippets are written in HTML: <div class="btn-toolbar text-center" role="toolbar"> <a href="#" class="btn btn-success">Link 1</a> <a href="#" class="btn btn-success">Link 11</a> < ...

Utilizing dropbox.js in combination with OAuth 1: A step-by-step guide

I'm in the process of revamping a website that already exists, and although I have the code from the previous version, I'm encountering challenges replicating certain functionalities in the new iteration. Here's the situation: The user is ...

Deactivate the form outside of normal business hours

I need to create a form for a delivery service that only operates from 9am to 9pm. If a user submits the form outside of these hours, I want to redirect them to a page displaying the company's operating hours instead of a thank you page. For instance ...

Is TinyMCE creating unexpected <g> tags?

When I save content in the TinyMCE WYSIWYG editor, I notice that the HTML tag below keeps appearing throughout the text: <g class="gr_ gr_283 gr-alert gr_spell gr_run_anim gr_inline_cards ContextualSpelling ins-del multiReplace" id="283" data-gr-id="28 ...

Arranging an array based on numerical values embedded in strings

My array is as follows: var arr = [ '4msterdam', 'Par1s', 'N3w York', '2urich']; Is there a way to sort the elements of this array based on the numbers included in each string? ...

AngularJS: steer clear of relying on the 'angular' global variable

Is it advisable to refrain from using the 'angular' global object within Controllers, Services, etc? Suppose we want to call the function: angular.isDefined(myVar) How should we reference the 'angular' object? Possible approaches: ...

Issue with NPM identifying my module (demanding unfamiliar module)

Currently, I am developing a React-Native application and organizing my components into separate files. Most of the time, this method works perfectly fine except for one specific instance where I keep encountering a 'Requiring unknown module' err ...

How can I use cookies to make an HTML div disappear when a button is clicked?

I've been attempting to conceal this message in Vue.js, but so far I haven't had any luck. Currently, I am utilizing the js-cookie library. My objective is as follows: HTML <div v-show="closeBox()"> < ...

Including Parameters in File Paths with ExpressJS

I am currently facing an issue with uploading specific photos to a client's folder within my public/assets directory. The file path I am aiming for is public/assets/:id. However, when running my code, the file path always ends up being public/assets/u ...

Disabling a button based on the result of a database query

Is there a way to dynamically enable or disable a button based on the result of a database query in JavaScript? I have managed to display an error message (with id="error") depending on the result, but toggling the button (with id="generate") doesn't ...

Tips on inserting javascript to modify the CSS class of a table data cell in a Flask WTF jinja2 table based on the cell's value

I have integrated Flask WTF to showcase the results of a database query. I am seeking a way to modify the cell background color to light red if the value is below 25. I am unsure about where and how to embed the JavaScript code to validate the cell value a ...

verifying the presence of a string or value within an array

I'm currently working on a feature that involves adding an element to an array by typing something into a text field and clicking a button. I've also implemented an if statement to check if the input already exists in the table, and show an alert ...

What steps should I take to have a specific input prompt a certain action?

I am currently working on creating a function that checks when a user inputs a number between 0 and 8, triggering an action corresponding to that specific number. For example, if the user enters 5, a picture and text should appear; whereas if they input 3, ...

Determine the precise x and y coordinates of a centered element using JQuery

How can I determine the exact left and top positions of an element? The parent container has text-align: center, causing potential confusion when there are multiple elements on the bottom row. For instance, the first one may have a position of 0px instea ...

jsx eliminate parent based on dimensions

Imagine I have a DOM structured like this <div className="parent"> <div>child 1</div> <div>child 2</div> </div> If the view is on mobile, I would like the DOM to transform into <div>child 1</ ...

Display the country code according to the option chosen by the user in the dropdown menu

To enhance user experience, I am implementing a feature where the user can select their country from a drop-down list and then have the corresponding country code displayed in a text field for easy entry of their phone number. Below is the list of countri ...

Exploring the dynamic loading of JavaScript functions with Ajax in Dojo while passing arguments

Currently, I am working on implementing a require/load function that handles the retrieval and execution of remote JavaScript code. The function is functioning well, but I have been using a workaround to pass arguments by setting global variables. However, ...

"Retrieve user input data and send it to controller using jQuery's Ajax method

Check out this form: <form> <input id="quantity" type="text" placeholder="Quantity in &euro;" name="inputamount"/> <button class="btn btn-lg" type="submit" id="btn1" >Submit Form</button> <button class="btn bt ...

What is the method utilized by Redux to store data?

I am currently developing a small application to enhance my understanding of how to utilize redux. Based on my research, redux allows you to store and update data within the store. In my application, I have implemented an HTML form with two text inputs. Up ...