Grow your CSS skills. Land your dream job.

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

  • # April 22, 2013 at 7:45 am

    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

    # April 22, 2013 at 7:57 am

    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
    # April 22, 2013 at 8:08 pm

    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();
    });

  • Users

  • Item
  • Item

That how I used it in my site, if it does’t make sense let me know and ill help you out more.

# April 22, 2013 at 8:44 pm

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.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".