Hi
This is the code :
So when I click outside of the search-bar it closes again. But I want it to close also when I click the search icon.
How can I make it close again when clicking the search icon when it is active?
Never mind the second icon down to the left. I dont know why that ones arose there.
You can’t do this without javascript. You are relying on the focus state to expand the search input. When it has focus you expand it and when it loses focus (such as clicking anywhere else on the page) then it hides again. But when you click on the search icon you are really clicking on the input and thus focus remains on the input.
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.
Ah ok thanks
What Javascript do you have in mind for it? Would love to try
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.
I have some basic knowledge of Javascript. I know onclicks and that stuff.
Creating basic buttons and so on.
I want it to close when I click the icon once it has been opened. That is the thing I want it to do. Right know the search bar only closes when I click outside of it on another part of the website.
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.
Aha will do it when I wake up next thing tomorrow thanks. Do you have any particular event handler in mind? For example on codepen or something?
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"
Is this the event handlers that are called aria or something? If there is a pen with this I can borrow from that would be much appreciated.
I have now used these aria-functions and stuff from another pen. But I don’t quite manage to do what I want.
As you can see I have removed the cancel button(which is inside quotes in the HTML) and are trying to make the existing search icon do the same thing once active. How can I do that really?
I have tried to change terms and stuff. But I don’t manage to do it. I want the search icon to close the bar as well as open it. Right now it only opens it.
The Mr Pen:
Aria attributes aren’t functions, they are attributes you add to elements to help people who use assistive technology (such as screen readers). Adding them is necessary in a lot of cases but it doesn’t add any functionality to the element, you have to do that with javascript.
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.
Yeah
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.
Can anyone tell me where my pen is wrong?
Did you fix it? Checking your pen, it looks like you added an X button that does exactly what you wanted.
I have solved it now. By adding an svg in the middle. But now another test arose after. Now I am trying to make the icon become thicker. But don’t know quite how. Do you have an idea.
Check the pen I have changed it.
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:
As you can see the red search field is visible:
But when putting it all in a footer it starts looking like this completely black:
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
