The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Animating DIVs on mouse click CC3, jquery, or Combination of both?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #31409

    Here’s the scenario,
    I have a wrapper 900px wide with an infinite number of’s inside of it. Those boxes are set to have an initial width & height of say 300px by 200px. At that dimension they would only show the img thumbnail that is inside the (top left corner). When user clicks on a, that div box expands to its full size of 600px x 400px revealing the rest of its content. this would also a displace the other, but still remain true to the wrapper’s dimensions. The expand would close either on second click or a close button.

    I can vaguely remember seeing this done somewhere on the web, but I can not find it anymore. It there a jquery script out there for this or can this be done with pure CSS3?

    Thanks for your help!


    This can be done with CSS3 in browsers that support it (e.g. Safari/Chrome FF 4). If you use a tool called Modernizr, you can easily detect which browsers support this feature and use jQuery for thost that don’t. You’ll need to write a custom function, but it would be something like this:

    $('#wrapper').delegate('.box', 'click', function() {

    if ( $(this).hasClass('open') ) {

    'width' : '300px',
    'height' : '200px'
    }, 500);

    } else {

    'width' : '600px',
    'height' : '400px'
    }, 500);



    This will do the trick, assuming that you’ve wrapped all of the ‘s in a wrapper. Just change out that ID and you’re good to go.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.