Cómo evitar que se me encimen las divs?

[mdo]

Hola a todos!!!!!!!!!!!!! Acabo de resolver el problema que tenía con una función js (jquery) - pero se me presenta otro bastante incómodo. En una página, tengo tres btns que al pulsarlos muestra a su derecha el texto correspondiente. Hasta ahí todo bien, pero... si pulso el primero (se me despliega el texto correspondiente, claro) y luego pulso el segundo, el texto de este me aparece encima del anterior!!!! y si pulso el tercero, se encima a los dos. Horrible!! saben cómo puedo solucionar esto, por favor? aquí les dejo el css

Código:

<style type="text/css">
		#ind {
			width:410px;
			height:410px;
			border-left:1px #f90 solid;
			margin-left:474px;
			padding-right:55px;
			margin-top:50px;
			display:none;
			position:absolute;
			z-index:600;
		}
 
		#colec {
			width:450px;
			height:430px;
			border-left:1px #f90 solid;
			margin-left:474px;
			margin-top:50px;
			overflow:scroll;
			overflow-x:hidden;
			display:none;
			position:absolute;
			z-index:600;
		}
		
		#publ {
			width:410px;
			height:430px;
			border-left:1px #f90 solid;
			float:right;
			margin-left:474px;
			margin-top:50px;
			display:none;
			overflow:hidden;
			position:absolute;
			z-index:600;
		}
	</style>

y aquí el js:

Código:

<script type="text/javascript">
		$(document).ready(function(){
			$(".btn1").click(function (){
				$("#ind").slideToggle("slow");
				visibility:true;
				(this).toggleClass("active");
			});
			$(".btn2").click(function (){
				$("#colec").slideToggle("slow");
				(this).toggleClass("active");
				visibility:true;
			});
			$(".btn3").click(function (){
				$("#publ").slideToggle("slow");
				(this).toggleClass("active");
				visibility:true;
			});
		});
	</script>

por si quieren ver el ejemplo:
lo pueden ver aquí
Les estaré enormemente agradecida por una respuesta. Muchas gracias desde ya.

[America|UNK]

XD, la ùnica manera de evitar eso es ocultar todos los divs de los mensajes y solo mostrar el seleccionado, tambien otra forma màs fàcil de hacerlo es agregarle un fondo a los div's.

[mdo]

pues claro, America. Pero no logro hacerlo, algo me falta en js, yo añadi lo siguiente:

Código:

<script type="text/javascript">
		$(document).ready(function(){
			$(".btn1").click(function (){
				$("#ind").slideToggle("slow");
				visibility:true;
				(this).toggleClass("active");
				("#colec", "#publ").hide();
			});
			$(".btn2").click(function (){
				$("#colec").slideToggle("slow");
				(this).toggleClass("active");
				("#ind", "#publ").hide();
				visibility:true;
			});
			$(".btn3").click(function (){
				$("#publ").slideToggle("slow");
				(this).toggleClass("active");
				("#colec", "#ind").hide();
				visibility:true;
			});
		});
	</script>

pero no me funciona. Podrías ayudarme con el código? cómo declaro las funciones que mientras muestre una div, las otras queden ocultas? Muchas gracias

[America|UNK]

Borrar todo el script y escribe esto

Código Javascript:

$(document).ready(function(){
 var divs = ["#nada","#ind","#colec","#publ"];
 $("#btnera a").click(function(){
   for(var x in divs) {$(divs[x]).hide();}
   $(divs[$(this).attr("class").split("btn")[1]]).slideDown();
 });
})
 

Hay formas mas fáciles pero haz un juego de clases con los divs que vas a trabajar.