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...