I’m certain this isn’t an original idea, but I haven’t ever seen anyone blog about it…probably because I don’t even really know what this technique should be called. Accessible toggle boxes, sliding anchor content, fairy-dustless slight of hand? Help me out here.
Very clever, indeed. I’ll keep this one in mind. If you didn’t on the live site.. it may be helpful to set the h4’s (cheese & chocolate) within each div to display:block; by default and to :none with the j-sizzle. Just a thought.. would give non js users a better idea which one they’re viewing with minimal work.
Yea, that’s really why those H4s are in there. The demo here works a little differently than the real client version – mainly to keep the project ambiguous. If I had more time, I’d make a downloadable code sample. I don’t think anyone will find the code from this specific demo useful, but hopefully the concept itself is transferable.
Took me a second to figure out what was going on. Very nicely done!