Geek Answers Handbook

Show onclick div and hide the image that caused it

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

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 to configure this to hide the element that fired him?

+4
source share
5 answers

Jimmy's answer will work, however, to make it show a backup (I assume you want it), you must add an identifier 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'; }
+6
source

[edit]

Change the function as follows:

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

And the onclick attribute:

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

I'd rather simplify the context to emphasize what's important, inspired by Chris to 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>
+2
source

Send the second parameter (this) to "onclick", which will be the image element itself

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

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

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

But all this is intrusive Javascript code, I would recommend using unobtrusive JS code.

+1
source

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

-2
source

More articles:


All Articles