Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<p id="phone" >Click to view number</p>
<p id="email" >Click to view email</p>
</body>
</html>
 
#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
}
 
(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");
    });
})();    
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers