Jalon Juanis Jalon Juanis - 6 days ago 6
HTML Question

Jquery click function not working [SOLVED]

I'm facing problem to trigger jquery click function. I want to hide phone number and email using jquery. The phone number and email only can see if using click the

<p>
tag.

Below is my jquery function that I already write;

function() {
var $phone = '123456123',
$email = 'info@youremail.com',
phone = $('#phone'),
email = $('#email');

$(phone).click(function() {
var text = $(this).text() == $phone ?
'Click to view number' : $phone;
$(this).text(text).toggleClass("active");
});

$(email).click(function() {
var text = $(this).text() == $email ?
'Click to view email' : $email;
$(this).text(text).toggleClass("active");
});

}();


This one is my styling for number and email
<p>
tag

#phone,#email {
margin-top:20px;
width:300px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
color:#666;
font-family: Geneva,sans-serif;
text-align:center;
font-size:20px;
background-color: #fafafa;
background-size: 14%;
background-repeat: no-repeat;
background-position: 3% 50%;
outline:none;
border:none;
border-style:none;
font-weight:700;
cursor:pointer;
padding:20px;
border-radius:50px
}


Here is how I write the
<p>
tag on HTML

<p id="phone" >Click to view number</p>
<p id="email" >Click to view email</p>


I run the code, the
<p>
show but when I click it. It's showing the number and email.

Answer

Just needed a small fix on js. See it working here

$(function() {
    var $phone = '123456123',
          $email = 'info@youremail.com',
            phone = $('#phone'),
              email = $('#email');

    $(phone).click(function() {
        var text = $(this).text() == $phone ?
            'Click to view number' : $phone;
        $(this).text(text).toggleClass("active");
    });

    $(email).click(function() {
        var text = $(this).text() == $email ? 
            'Click to view email' : $email;
        $(this).text(text).toggleClass("active");
    });
});    
Comments