Solved it with the below, by giving the text id to the placeholder text:

<script>
function SEmail() {
    var x = document.getElementById('email');
        x.style.display = 'block';
    var y = document.getElementById('text');
        y.style.display = 'none';
}
</script>

<p class="email">
  <?php _e('E-mail:', 'theme') ?>
  <span id="text" onclick="SEmail()"><a href="#">Show E-mail</a></span>
  <span id="email" style="display:none"><a href="mailto:<?php echo contact_email(); ?>">Email link</a></span>
</p>

Thanks for help @ChrisG and @isherwood

Just add another function to hide it onclick

try this

HTML:

<p class="email">
  <?php _e('E-mail:', 'theme') ?>
  <span onclick="SEmail()"><a href="#">Show E-mail</a></span>
  <span onclick="HideEmail()" id="email" style="display:none"><a href="mailto:<?php echo contact_email(); ?>">Email link</a></span>
</p>

JavaScript

function SEmail() {
  var x = document.getElementById('email');
  if (x.style.display == 'none') {
    x.style.display = 'block';
  } else  {
    x.style.display = 'none';
  }
}

function HideEmail() {
  var x = document.getElementById('email');
  x.style.display = 'none';
  
}