Try this (demo here):
$(document).ready(function(){
$('#grid').masonry({
singleMode: false,
itemSelector: '.box',
animate: true
});
$('.box').click(function(){
if ($(this).is('.expanded')){
restoreBoxes();
} else {
restoreBoxes();
$(this)
// save original box size
.data('size', [ $(this).width(), $(this).height() ])
.animate({
width: 335,
height: 335
}, function(){
$('#grid').masonry();
})
.addClass('expanded');
}
function restoreBoxes(){
var len = $('.expanded').length - 1;
$('.expanded').each(function(i){
var box = $(this).data('size');
$(this).animate({
width: ( box[0] || 100 ),
height: ( box[1] || 'auto' )
}, function(){
if (i >= len) {
$('#grid').masonry();
}
})
.removeClass('expanded');
})
}
});
});
Update: Hi Jam, I didn't know you left a comment for me, next time please add comments under the answer or update your question. Also you can put "@" in front of the person's name and they will get a message flag.
In response to your question about set size and hidden content, I modified the demo (pretty much all of the HTML and CSS included) to show varying width boxes. Having the clicked box to expand to contain all of the hidden content has a slight problem. Normally, hidden content has a height and width of zero. But jQuery is able to determine the hidden content size, but it still has some problems because you might need to limit the width or height of the hidden content. So what I ended up doing was adding the hidden content in a inside of the box and adding a data-size attribute to the box which contains the width and height of the expanded hidden content, for example:
<div class="box" data-size="380,380">
<p>This is the visible content.</p>
<div class="expandable">
This is the hidden content which shows when the box is clicked.
</div>
</div>
I've also included a way to hide the visible content when the box is expanded, by adding a hideable class to the content, since the image you provided seems to have the original content hidden:
<div class="box" data-size="380,380">
<p class="hideable">This is the visible content.</p>
<div class="expandable">
This is the hidden content which shows when the box is clicked.
</div>
</div>
If the data-size attribute is not set, then the script will default to the defaultSize setting:
Note the demo is using $(document).ready(function(){...}) instead of $(window).load(function(){...}) as recommended by the author of masonry because jFiddle just doesn't want to work with window load.
$(window).load(function () {
var defaultSize = [180, 180]; // expanded box size: [width , height]
$('#grid').masonry({
singleMode: false,
columnWidth: 100,
resizeable: true,
itemSelector: '.box',
animate: true
});
$('.box').click(function () {
if ($(this).is('.expanded')) {
restoreBoxes();
} else {
var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize;
$(this)
// save original box size
.data('size', [$(this).width(), $(this).height()]).animate({
width: size[0],
height: size[1]
}, function () {
// show hidden content when box has expanded completely
$(this).find('.expandable').show('slow');
$(this).find('.hideable').hide('slow');
$('#grid').masonry();
});
restoreBoxes();
$(this).addClass('expanded');
}
function restoreBoxes() {
var len = $('.expanded').length - 1;
$('.expanded').each(function (i) {
var box = $(this).data('size');
$(this).find('.expandable').hide('slow');
$(this).find('.hideable').show('slow');
$(this).animate({
width: (box[0] || 100),
height: (box[1] || 'auto')
}, function () {
if (i >= len) {
$('#grid').masonry();
}
}).removeClass('expanded');
})
}
});
});
