Trouble making icon disappear and replacing with input field

Trouble making icon disappear and replacing with input field
0

#1

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/zBEBoP


#2

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 :slight_smile:


#3

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…:grin: Thank you sooo much!


#4

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.