Élément JavaScript hide/show

Question

Comment puis-je masquer le lien "Editer" après avoir appuyé dessus ? Et puis-je aussi masquer le texte "lorem ipsum" lorsque j'appuie sur 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

Je recommande Javascript, car il est relativement rapide et plus malléable.

    <script>
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';
}
</script>

<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

HTML

<button onclick="myFunction()">Click Me</button>

<div id="myDIV">
  This is my DIV element.
</div>

JS

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Answer 3

Je pense aussi que jQuery est meilleur. Voir ceci :

<script>
$(document).ready(function(){
   $("#item").click(function(){
     $(.post).toggle();
   });
 });
</script>

Et HTML :

<div class='post'>ABC</div>

<button id='item'>Toggle Me!</button>