É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

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

Vous pouvez également utiliser ce code pour afficher/masquer des éléments :

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

Note La différence entre style.visibility et style.display est lorsque vous utilisez visibility:hidden contrairement à display:none, la balise n'est pas visible, mais un espace lui est alloué dans la page. La balise est rendue, mais elle n'est pas visible sur la page.

Voir ceci lien pour voir les différences.

Answer 3

Je suggère ceci pour cacher les éléments (comme d'autres l'ont suggéré) :

document.getElementById(id).style.display = 'none';

Mais pour rendre les éléments visibles, je suggère ceci (au lieu de display = 'block') :

document.getElementById(id).style.display = '';

La raison en est que l'utilisation de display = 'block' entraîne une marge/un espace blanc supplémentaire à côté de l'élément rendu visible dans IE (11) et Chrome (version 43.0.2357.130 m) sur la page sur laquelle je travaille.

Lorsque vous chargez une page dans Chrome pour la première fois, un élément sans attribut de style apparaît comme ceci dans l'inspecteur DOM :

element.style {
}

Le cacher en utilisant le JavaScript standard le fait, comme prévu :

element.style {
  display: none;
}

En le rendant à nouveau visible à l'aide de display = 'block', il devient ceci :

element.style {
  display: block;
}

Ce qui n'est pas la même chose qu'à l'origine. Cela pourrait très bien ne faire aucune différence dans la majorité des cas. Mais dans certains cas, cela introduit des anomalies.

L'utilisation de display = '' rétablit l'état d'origine dans l'inspecteur DOM, ce qui semble être la meilleure approche.

Answer 4

Je voudrais vous suggérer le JQuery option.

$("#item").toggle();
$("#item").hide();
$("#item").show();

Par exemple :

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

Answer 5

Vous pouvez utiliser la propriété hidden de l'élément :

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false