Jquery grid expand/collapse div siblings gallery

Question

Working on a gallery where there is a grid of 4 images and when you click on one the image, this same image expands and another division with some content shows up right next to it, moving the rest of images down.

My main question is: I'm not sure how to make column number 4 not move when the new division shows up. I've been playing around with css positions with no success

It feels pretty solid but maybe I'm approaching it wrong, would this be easier with Isotope?

This fiddle is what I came up with:

http://jsfiddle.net/jupago/xq279/32/

$(".photo").click(function(e) {
    if( $(this).prev().hasClass("open") ) {
        $(this).prev().removeClass("open").addClass("closed");
            }
    else {
        // if other menus are open remove open class and add closed
        $(this).siblings().prev().removeClass("open").addClass("closed"); 
        $(this).prev().removeClass("closed").addClass("open");
    }
     if( $(this).hasClass("opaque") ) {
        $(this).removeClass("opaque");
        }
    else {
        // change opacity of selected image
        $(this).siblings().removeClass("opaque"); 
        $(this).addClass("opaque");
    }
});

Answer 1

I fiddled around a bit and came up with this: http://jsfiddle.net/S3QpB/

HTML: I moved the box divs for row 4 after and gave them ids so I could test against them in the javascript.

<div class="wrapper">
<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>


<div class="photo" id="box-4"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>    

<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="photo" id="box-4-2"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>        

<div class="gallerybox column1">TEXT for image 1</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="gallerybox column2">TEXT for image 2</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="gallerybox column3">TEXT for image 3</div>
<div class="photo"><img src="http://goo.gl/VEEw3z"/></div>

<div class="photo" id="box-4-3"><img src="http://goo.gl/VEEw3z"/></div>
<div class="gallerybox column4">TEXT for image 4</div>        

JavaScript:

$(".photo").click(function(e) {
if ( ($(this).attr('id') !== "box-4") && ($(this).attr('id') !== "box-4-2") && ($(this).attr('id') !== "box-4-3") ) {
    if( $(this).prev().hasClass("open") ) {

        $(this).prev().removeClass("open").addClass("closed");

        }

    else {

        // if other menus are open remove open class and add closed

        $(this).siblings().prev().removeClass("open").addClass("closed"); 

        $(this).prev().removeClass("closed").addClass("open");

    }

     if( $(this).hasClass("opaque") ) {

        $(this).removeClass("opaque");

        }

    else {

        // if other menus are open remove open class and add closed

        $(this).siblings().removeClass("opaque"); 

        $(this).addClass("opaque");

  }
} else {
    if( $(this).next().hasClass("open") ) {
        $(this).next().removeClass("open").addClass("closed");
        }
    else {
    $(this).siblings().next().removeClass("open").addClass("closed"); 
        $(this).next().removeClass("closed").addClass("open");
    }
    if( $(this).hasClass("opaque") ) {
        $(this).removeClass("opaque");
        }
    else {
        // if other menus are open remove open class and add closed
        $(this).siblings().removeClass("opaque"); 
        $(this).addClass("opaque");
  }
}
});