Div slideDown on hover/Div slideDown on click

[asiek]

Hello. I am looking forward to creating a search box that slides down when the magnifying glass is hovered and slides back up if input is not active. Or a search box that slides down when the magnifying glass is clicked…

Unfortunately, I have no example code to display here…so I was hoping to get tutorial recommendations on either/both if possible.

Please Help.

[Paulie_D]

Your best option to learn this stuff is to code up the layout you want without any functionality at all…perhaps in Codepen?

Then we could, perhaps, see our way towards helping you get the hover / click option working rather than us doing it all step by step for you.

I’m not sure ‘hover’ is your best option as the box would slide back as soon as the hover was released..but something could be worked up, I’m sure.

[asiek]

@Paulie_D If you take a look at the last part of my post you’ll see that is says: “Unfortunately, I have no example code to display here…so I was hoping to get tutorial recommendations on either/both if possible.”

I was not asking for anyone to do the work for me, I was asking for tutorials on how I can create it…
Since I’m not experienced in any of this…

But thank you!

[SZRimaging]

It wouldn’t be that hard to do it on hover. All you have to do is check the input, if the value isn’t empty, don’t slide back up.

You could also check for focus on the text input.

In fact, there is one that slides over behaving exactly that way on a site I’m deving right now (I am doing CMS implementation, the JS was written by an outside company).

[Author]

Posts