Want to "spin" a button’s icon onClick. Any ideas?

[biklops]

Hi everyone!

I’m about to launch a new site that features an info "drawer" that slides out. You can see it here:

http://v2.biklopsdesign.com/work.html

I love it but I have one little aesthetic tweak I’d like to make and can’t seem to find a jQuery plugin that can do it. When the drawer is closed I’d like to have that little arrowhead point up, and when it is open I’d like the arrowhead to point down. Basically a "toggle" depending on the state of the drawer. Currently that little arrowhead icon is a BG image but I could easily just make it a regular <img> if that helps.

Any ideas?

[Historical Forums User]

Sure. Have a separate background image with the alternate state. You can even do this using CSS Sprites to save bandwidth.

Just search CSS Tricks to find out more: https://css-tricks.com/search-results/?c … ricks.com/

[biklops]

I use css sprites all the time but I don’t think it would work in this situation for two reasons: 1) It wouldn’t look like it’s spinning, just up or down. and 2) It wouldn’t toggle right? You could click on it and make its active state the arrow down, but when you click on it again, closing the drawer the arrow wouldn’t go back to pointing up. I could use a loooong css sprite with various angles of rotation and then animate its bg-position via jQuery but I don’t really understand how to get it to toggle really.

[Author]

Posts