CODEWITHSUNDEEP
javascriptonclickshow-hide
codeChris
codeChris

Reputation: 885

Show a div onclick and hide the image that triggered it

I would like to use the following code to display a hidden div onclick, but then when the it is displayed, I want the image that I used to trigger it to disappear. Here is what I have so far:

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

How do adjust this to hide the element that fired it?

Upvotes: 4

Views: 93202

Answers (5)

cregox
cregox

Reputation: 18390

I rather simplify the context to highlight what matters, inspired by Chris's answer:

<img id="clickMeId" onclick="show('comment'); hide('clickMeId')" alt="click me">

<div id="comment" style="display:none;"> yada yada </div>

<script>
  function show (toBlock){
    setDisplay(toBlock, 'block');
  }
  function hide (toNone) {
    setDisplay(toNone, 'none');
  }
  function setDisplay (target, str) {
    document.getElementById(target).style.display = str;
  }
</script>

Upvotes: 2

James Coyle
James Coyle

Reputation: 10398

[edited]

Change the function to this:

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

And the onclick attribute to this: 

<img onclick="show(this, 'comment')" />

Upvotes: 2

ecairol
ecairol

Reputation: 6553

Send a second parameter (this) on the "onclick", that would be the image element itself

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

then the function would apply a "display none" to it:

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

But all of this is obtrusive Javascript code, I would recommend you use unobtrusive JS code.

Upvotes: 1

Chris
Chris

Reputation: 943

Jimmy's answer will work, however to get it to show back up (I assume you want that) you should add an id to the image tag... The following should work.

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

Upvotes: 6

ArthasNed_StarkGimli
ArthasNed_StarkGimli

Reputation: 42

Using jquery this is easy. $("#yourdivid").hide();

Upvotes: -2

Related Questions