# Trouble making icon disappear and replacing with input field **URL:** \ **Category:** I Built This\ **Created:** [July 8, 2016, 10:28pm UTC](https://forum.freecodecamp.org/t/trouble-making-icon-disappear-and-replacing-with-input-field/18671 "2016-07-08T22:28:44Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![pilgrim011](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pilgrim011/32/16352_2.png) [@pilgrim011](https://forum.freecodecamp.org/u/pilgrim011)\ **Post date:** [July 8, 2016, 10:28pm UTC](https://forum.freecodecamp.org/t/trouble-making-icon-disappear-and-replacing-with-input-field/18671/1 "2016-07-08T22:28:44Z")
Ok, so I have the idea in my head that I can take an image and when clicking on the image, it should magically transform into search input field, but I’m probably doing it completely wrong, I have tried more than a few options, and seems like I don’t now how to remove an icon/image, let alone replace it with another element like input field. I have tried Bootstrap Glyphicons also, but I think my mind is gone right now (I’m bad at Jquery/JS anyway), and I cannot clearly think anymore, so I would appreciate any help. Here are my two codepens, the pattern is similar, with slight changes: [http://codepen.io/pilgrim011/pen/mErGBW](http://codepen.io/pilgrim011/pen/mErGBW) [http://codepen.io/pilgrim011/pen/zBEBoP](http://codepen.io/pilgrim011/pen/zBEBoP) ---
**Author:** ![Beekey](https://avatars.discourse-cdn.com/v4/letter/b/74df32/32.png) [@Beekey](https://forum.freecodecamp.org/u/Beekey)\ **Post date:** [July 8, 2016, 11:21pm UTC](https://forum.freecodecamp.org/t/trouble-making-icon-disappear-and-replacing-with-input-field/18671/2 "2016-07-08T23:21:41Z")
You are doing quite well. Just a couple of minor changes. First, open settings and add jQuery in the JavaScript section. Then add quotes to **click** in the JS section of your code. That should make your code work 🙂 ---
**Author:** ![pilgrim011](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pilgrim011/32/16352_2.png) [@pilgrim011](https://forum.freecodecamp.org/u/pilgrim011)\ **Post date:** [July 8, 2016, 11:37pm UTC](https://forum.freecodecamp.org/t/trouble-making-icon-disappear-and-replacing-with-input-field/18671/3 "2016-07-08T23:37:05Z")
Ohhhh, myyyy Godddd! I cannot believe I was that careless - I thought that the first thing I did was adding jQuery, but obviously not… Also, this is the first time that I am using .on(“click”) - so far I was using just .click(), so it was a stupid “first time user” mistake - I have read somewhere that it’s better to use .on, but forgot that we need quotes… I spent the past 24 hours or so thinking that maybe I’m trying something impossible, and that there is some weird-lots-of-complicated-code solution for this…😁 Thank you sooo much! ---
**Author:** ![Beekey](https://avatars.discourse-cdn.com/v4/letter/b/74df32/32.png) [@Beekey](https://forum.freecodecamp.org/u/Beekey)\ **Post date:** [July 8, 2016, 11:51pm UTC](https://forum.freecodecamp.org/t/trouble-making-icon-disappear-and-replacing-with-input-field/18671/4 "2016-07-08T23:51:34Z")
LOL That sounds very familiar. I make such mistakes all the time. Once I forgot to add http:// to a link and spent hours trying to figure out why the damn API wasn’t responding. I guess it’s part of the process. ---
**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\ **Post date:** [June 1, 2021, 6:10pm UTC](https://forum.freecodecamp.org/t/trouble-making-icon-disappear-and-replacing-with-input-field/18671/5 "2021-06-01T18:10:44Z")