Making a grid with expandable boxes

Question

I'm having a bit of trouble with a grid of boxes i'm making in CSS and jQuery.

The problem is, that the boxes has to expand when you click on them, and they do, but when you click on the one farest to the right, it has nu room to stay on line and it moves down.

This is my page:

http://nxtstep.dk/test/produkter.html

And this is the problem:

http://nxtstep.dk/test/problem.png

This is my code (might not be so pretty but it does the job):

    $('ul#products li a').click(function() {

    //Reset
    $('ul#products li').removeClass("marked");
    $('ul#products li .product-text').hide();

    var productID = $(this).attr('name');

    $("#product-"+productID+"").addClass("marked");
    $("#product-text-"+productID+"").show();

    });

My question is: Is there a way to maybe make that box switch place with the one before that or any other way to make sure it stays on its line? Maybe a plugin?

Answer 1

You could use a small .swap() method from this blog:

jQuery.fn.swap = function(b){
    b = jQuery(b)[0];
    var a = this[0];
    var t = a.parentNode.insertBefore(document.createTextNode(''), a);
    b.parentNode.insertBefore(a, b);
    t.parentNode.insertBefore(b, t);
    t.parentNode.removeChild(t);
    return this;
};

And this code snippet:

$('#products').on('click', 'li', function() {
    var $this = $(this);
    if($this.index() % 4 == 0) {
        $this.swap($this.prev());
    }
    $this.addClass('marked').siblings().removeClass('marked');
});

CSS

#product li .product-text { display: none; }
#product li.marked .product-text { display: block; }

If you also want to swap back if the element gets closed, the code would have to be extended...

Answer 2

One way is that put only three items in one row so that when it expand it will not go in second line.

The other ting is that if only three items are there then it will look better and doesn't go on second line.