Afficher un div onclick et masquer l'image qui l'a déclenchée

Je voudrais utiliser le code suivant pour afficher une cachée div onclick, mais quand il est affiché, je veux que l'image que j'ai utilisé pour la déclencher à disparaître. Voici ce que j'ai à ce jour:

HTML:

<img src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

JS:

function show(target){
document.getElementById(target).style.display = 'block';
}
function hide(target){
document.getElementById(target).style.display = 'none';
}

Comment ajuster ce pour masquer l'élément qui a déclenché ça?

OriginalL'auteur codeChris | 2013-03-05

  1. 6

    Jimmy réponse va fonctionner, cependant, à obtenir pour montrer de revenir en arrière (je suppose que vous voulez), vous devez ajouter un id à la balise d'image... Le suivant devrait fonctionner.

    <img id="clickMeId" src="Icons/note_add.png" onclick="show('comment')"/>&nbsp;&nbsp;<div id="comment" style="float:left;display:none;"><textarea name="textfield6" cols="30" rows="2" id="textfield4" class="text"></textarea>&nbsp;<a href="#" class="buttonintable">Submit</a></div>

function show(target){
document.getElementById(target).style.display = 'block';
document.getElementById("clickMeId").style.display = 'none';
}
function hide(target){
document.getElementById(target).style.display = 'none';
document.getElementById("clickMeId").style.display = 'block';
}

    OriginalL'auteur Chris

  2. 2

    [édité]

    Modifier la fonction:

    function show(this, target){
    document.getElementById(target).style.display = 'block';
    this.style.display = 'none';
}

    Et l'attribut onclick: 

    <img onclick="show(this, 'comment')" />
    À l'aide de onclick en ligne, vous n'avez pas à passer this. Lorsque vous l'utilisez comme element.onclick = function;, vous n'avez pas, et ni avec addEventListener.
    La pensée aussi. Merci pour la clarification!

    OriginalL'auteur James Coyle

  3. 1

    Envoyer un second paramètre (ce) sur le "onclick", qui serait l'image de l'élément lui-même

    <img src="Icons/note_add.png" onclick="show('comment', this)"/>

    alors la fonction applique un "display none":

    function show(target, trigger){
   document.getElementById(target).style.display = 'block';
   trigger.style.display = "none"
}

    Mais tout cela est gênant code Javascript, je vous recommande l'utilisation discrète du code JS.

    OriginalL'auteur ecairol

  4. -2

    À l'aide de jquery c'est facile.
    $("#yourdivid").hide();

    OriginalL'auteur ArthasNed_StarkGimli