JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<a href="#" id="store-finder">Click to find stores</a>
<p id="finding">finding location...</p>
<p id="have-location">Location found!</p>
<p id="no-location">type in your zipcode below</p>
</div>
CSS
#have-location, #no-location, #finding {
display:none;
}
JavaScript
$("#store-finder").click(function() {
$("#finding").show()
$("#store-finder").hide()
navigator.geolocation.getCurrentPosition(
function (position) {
$("#finding").hide()
$("#have-location").show()
},
function () {
$("#finding").hide()
$("#no-location").show()
}
);
});