JavaScript hide/show element

Question

How could I hide the 'Edit'-link after I press it? and also can I hide the "lorem ipsum" text when I press edit?

<script type="text/javascript"> function showStuff(id) {   document.getElementById(id).style.display = 'block'; } </script>   <td class="post">    <a href="#" onclick="showStuff('answer1'); return false;">Edit</a>   <span id="answer1" style="display: none;">     <textarea rows="10" cols="115"></textarea>   </span>    Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  </td> 

Answer 1

function showStuff(id, text, btn) {      document.getElementById(id).style.display = 'block';      // hide the lorem ipsum text      document.getElementById(text).style.display = 'none';      // hide the link      btn.style.display = 'none';  }

<td class="post">    <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>  <span id="answer1" style="display: none;">  <textarea rows="10" cols="115"></textarea>  </span>    <span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>  </td>

Answer 2

You can also use this code to show/hide elements:

document.getElementById(id).style.visibility = "hidden"; document.getElementById(id).style.visibility = "visible"; 

Note The difference between style.visibility and style.display is when using visibility:hidden unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

See this link to see the differences.