Expand div’s on click, close on click, then animate EXAMPLE

[chrislusk]

Hey guys,

I ran across this site today and wanted to see how this was done: http://www.mingaberlin.com/en/fashion-woman-man-unisex-socks-frauen-manner-unisex-socken.html

The way the div’s expand on click and then the “picture holder div” enlarges on click is really slick. Is this a jQuery plugin or purely CSS? (sorry for not knowing)

Thanks for the help!
Chris

[CrocoDillon]

Not sure if it’s a plugin or custom, definitely JavaScript though (they use jQuery and Prototype).

It’s a chain of animations (transitions, but not the CSS ones), AJAX and the last animation handles the scrolling too. Looks good but it would take me too much time to replicate that to show how you can do this. Maybe some one will come along that recognizes it as a plugin.

[aco]

Its not a plugin is a few simple lines of JavaScript (At least from what I can see). Its technically called an accordion and here is the JavaScript for it.

$(document).ready(function(){
$(“.box .items”).slideUp();
$(“.box .head”).click(function(){
$(this).next(“.box .items”).slideToggle();
});

[CrocoDillon]

Your markup is fubar, hope you don’t have that on your site ;) There is more going on that a few simple lines of JavaScript jQuery though. There is a loading animation while the content is being retrieved (fair enough that might be barely noticeable), after that the box expands (this is the part you covered), after that current content fades out, new content fades in and the window gets scrolled. You might stop there but if you click the black & white bar you’ll notice even more animations. The black & white pictures become larger, colorful pictures. The rest of the new content gets replaced again by the old content, and you can slide the pictures to see anything that doesn’t fit on the screen. If you know some jQuery it’s not that hard to make, if you take it step by step, it just takes a lot of time.

[Author]

Posts