Using JS, you would have an actual <button> for the search icon and then you would toggle the state of the input when you click on the button.
Although perhaps you could use a checkbox for the search icon and then use the :checked pseudo-class to toggle the input display. So maybe I’m wrong and you don’t technically need JS. But normally you would not use a checkbox to do this as there might be accessibility issues with doing that.
Ya, no JS needed. Click the checkbox on my codepen demo. But if you use this method then the input will not hide if you click anywhere else on the page. So it’s a trade-off. Ultimately, the answer is to use JS.
I don’t know what your level of skill is with JS so it’s hard to offer good advice. Also, I’m not exactly sure I know what you are trying to create and how you want it to behave. I’m guessing you would need to use event listeners, which would most likely toggle classes and aria attributes to get the display states you want.
If you don’t have any JS experience right now then it probably is not a good idea to jump right into this stuff and you should learn the basics first. If you do know basic DOM manipulation and what event listeners are then I’m thinking you are probably going to want to use a toggle button. But again, because I don’t quite understand exactly what you are trying to do I could be wrong.
Right now the icon isn’t really a separate thing you can click on. You aren’t actually clicking on the icon, you are clicking on the input. You will need to put the icon in a separate element (such as a button) and then set up the event handlers to manage the display state of the input.
The event handler you’re looking for should be the “click” handler on that specific element. You also need to make sure it has some sort of state so you know if it’s been expanded or not. I’d recommend using data-attributes. Something like data-expanded="true/false"
Earlier I gave you a link to how to create toggle buttons, which is what it seems like you want to do here. I suggest you look at that article.
I am on my way now. The question is as above. I have tried to change the search bar so it both opens and closes the bar. But I don’t manage to do it. Right now it only opens it. The cancel icon/btn closes the bar now. But I want the search icon to do it.
I guess it’s a minor tweek but I don’t manage to do it now. So good if someone can take a look at that pen and tell me what I need to tweak.
Now I have another problem. And that is that when I put this stuff inside a footer it starts to behave strange. I cannot see the search field when active. But I can see it when I put it all in a pen. Here is the pen for that: