Show on Hover Hide on Click

[Cathyk]

Not so sure I’m following proper protocol but I’ve created a the jquery at CodePen and saved, http://codepen.io/anon/pen/vEpYeb.js. Want to know how I can change the script to show on hover and hide on click. Any suggestions greatly appreciated! BTW, not a coder so be nice please!

[Paulie_D]

It would be more helpful if you created a functional demo rather than just posting the JS/JQ.

Also, show/hide what?

If something is hidden…how can you hover on it?

Or are you hovering on one thing and showing another?

Are you adapting someone else’s plug-in? Do they offer the option you want in their documenation?

Can you provide a link to the original plug-in source page?

[Cathyk]

Thanks for the quick response. Sample page: http://biritesupermarket.com/TestingRebuild/bakery.html and yes, I’m using a plug-in from someone else, have contacted them with no response, http://biritesupermarket.com/TestingRebuild/js/showHide.js.

[Paulie_D]

I’m using a plug-in from someone else, have contacted them with no response,

Hmmm…do you have the original source link for the plugin? It might be handy to read up on it before we start chopping away.

EDIT – never mind

http://papermashup.com/jquery-show-hide-plugin/

[Paulie_D]

On thinking about this..I’m not sure this can be adapted. It’s using a click to toggle and, at least to my mind, a hover and a click would require two diferent functions.

JS folks…any thoughts?

I mean it’s simple enough to add a class on hover and remove it with a click but that’s two different things. Right?

[Shikkediel]

I have to agree there. Even more so, in JavaScipt it’s closer to three events because a hover is a chain of mouseenter and mouseleave. So I think TS is looking for a show on mouseenter and hide on click? Things could get complicated quickly (nevertheless they’re always doable)…

Would be good to know what the exact desired effect should be.

[Paulie_D]

http://codepen.io/Paulie-D/pen/LEeNvz

[Cathyk]

Thanks Paulie_D, this works great on desktop. However, on touch screen not staying open?

[Paulie_D]

Nope…it’s hover only.

I haven’t done anything on tap or touch.

[Shikkediel]

Looks slick, coding yourself is often the better option than using a plugin. Here’s a minor tweak for mobile :

Pen using toggle

[Cathyk]

JIC no one has told you guys, “You ROCK!” Thanks for all your help, patience and for sharing your time & talent.

[Author]

Posts