Desplegar contenido de cada item

[clarova]

Hola, llevo varios días dándole vueltas a un problema.

Estoy utilizando bootstrap y tengo la típica lista de productos a 4 columnas.
El problema es que al hacer click en cada item, se tiene que desplegar su contenido debajo de éste ocupando todo el ancho de la pagina, por lo que se me parte el sistema de columnas.

He intentado muchas cosas diferentes, pero todas tienen algún problema.

Ahora mismo tengo un div contenido cada 4 items, pero no consigo encontrar con jquery ese div para abrir el que corresponde, y además no tengo claro como le metería luego la información de cada item.
Es una plantilla para un cliente, por lo que luego ellos meterían su información con un bucle, y supongo que habría que usar json para ir metiendo el contenido de cada item en ese div contenido.

Os dejo el código que tengo ahora mismo:

HTML:

Código:

<div class="row row-js">
	<div class="col-md-3 item" clicked="false">
		<div class="prod-box primary-color-bg-alpha">
			<div class="show-family">
				<img src="img/fichaproducto.jpg">
				<div class="title primary-color">Nombre familia</div>
			</div>				
		</div>
	</div>
    
         (3 divs más col-md-3)
   
         <div class="subfamily">
	 
          (Contenido)
						
	</div>
        <div class="col-md-3 item" clicked="false">
		<div class="prod-box primary-color-bg-alpha">
			<div class="show-family">
				<img src="img/fichaproducto.jpg">
				<div class="title primary-color">Nombre familia</div>
			</div>				
		</div>
	</div>
        (3 divs más col-md-3)
        
        (<div class="subfamily">)

        (3 divs más col-md-3)
        
        (<div class="subfamily">)
       .
       .
       .
</div>

JS:

Código:

$('.item').click(function(event){

		$(".subfamily").slideUp('fast');
		var subfamily = $(this).next(".subfamily"); 
		if ($(this).attr('clicked') == "true"){//Si esta abierto el item que clicas
			subfamily.slideUp('fast');
			$(this).attr('clicked','false');
			$('.prod-box').css("padding-bottom","0px"); 
			$(".title").removeClass("primary-color-bg-alpha title-active");
		}else{//Si esta cerrado, entonces es otro
			subfamily.slideDown('fast');
			$(this).attr('clicked','true');
			$('.prod-box').css("padding-bottom","0px"); 
			$('.item').css("margin-bottom","0px"); 
			$(".title").removeClass("primary-color-bg-alpha title-active");
			$(this).find('.prod-box').css("padding-bottom","14px");	
			$(this).find(".title").addClass("primary-color-bg-alpha title-active");
		}
		return (false);
		
	})

var subfamily = $(this).next(".subfamily"); está mal porque solo se despliega si hago click en el ultimo item antes del div subfamily, en los demás no.

Se os ocurre alguna forma más fácil de hacerlo?

Muchas gracias de antemano.