Tengo un listado de productos con un bucle, el cual tiene un botón llamada ver detalles. Cuando doy click en "Ver detalles" este abre en modo toggle el div con los detalles del producto. Cuando le doy click en el otro producto pasa lo mismo y se coloca encima. y puedo verlo, Hasta ahí todo bien pero cuando me doy cuenta el div anterior no se ha ido, y lo que yo necesito es que al dar click sobre el boton "Verdetalles" del otro producto, el anterior se oculte y aparesca el otro como todo toggle ¿Alguien tiene una idea de como puedo hacerlo?
<div class="colum-img col-xs-12 col-md-9">
<h1>FORMATERÍA</h1>
<hr>
<?php
while($fila=mysql_fetch_array($resultado)){
?>
<div class="inner-producto col-xs-12 col-sm-6 col-md-4">
<div class="producto_container ">
<div class="producto_img">
<div class="img"><img src="<?php echo"$fila[ruta]"; ?>" class="img-responsive">
</div>
</div>
<div class="kind">
<h6><?php echo"$fila[nombre]" ?></h6>
<hr>
</div>
<div class="informacion">
<p class="info_pro col-md-6" id="<?php echo $fila[ind];?>">VER DETALLES</p>
<p class="icon_call col-md-6">
<a href="tel:013095009"><i class="fa fa-phone"></i></a>
<a href="mailto:contacto@grafissa.com"><i class="fa fa-envelope-o"></i></a>
</p>
</div>
<div id="enlace<?php echo $fila[ind];?>" class="detalles_p detalles_p<?php echo $fila[ind];?>">
<i class="close-detalles fa fa-close"></i>
<div class="detalle_img">
<img src="<?php echo"$fila[ruta]"; ?>" class="img-responsive">
</div>
<div class="detalles_info">
<h4><?php echo"$fila[nombre]" ?></h4>
<hr>
<p><i class="detalle_item">MATERIAL:</i><?php echo"$fila[material]" ?></p>
<p><i class="detalle_item">CANTIDAD:</i><?php echo"$fila[cantidad]" ?></p>
<p><i class="detalle_item">IMPRESIÓN:</i><?php echo"$fila[impresion]" ?></p>
<p><i class="detalle_item">TAMAÑO:</i><?php echo"$fila[tamano]" ?></p>
<p><i class="detalle_item">PRESENTACIÓN:</i><?php echo"$fila[presentacion]" ?></p>
<p><i class="detalle_item">SERVICIO DE ENTREGA:</i><?php echo"$fila[servicio]" ?></p>
</div>
<div class="detalles_bn">
<a href="tel:013095009">Llama al proveedor <i class="fa fa-phone"></i></a>
<a href="mailto:contacto@grafissa.com">Solicitar cotización <i class="fa fa-envelope-o"></i></a>
<p>"SpamBot Automatic: Opps!!, Este servicio borra automáticamente todos los correos de servidores
gratuitos, por lo que agradeceremos enviar su requerimiento desde su correo corporativo."</p>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
Y este es mi Jquery
$(".info_pro").click(function(){
$(".info_pro").addClass('btn_activo');
var href= $(this).attr('id');
$("#enlace"+ href).animate({
width:"toggle"
});
$(".detalles_p"+ href).addClass('activo');
});
$(".btn_activo").click(function(){
var href= $(this).attr('id');
$("#enlace"+ href).animate({
width:"hide"
});
});