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.