script incompleto?

Question

Hola a todos!!! soy nueva en este foro y también hace poco que estoy con jquery. Mi duda es cómo hacer que un div que se acciona al pulsar un btn, se oculte cuando se pulse el segundo o tercer btn. Es que logré que cada btn llame a su texto correspondiente, pero resulta que si pulso el 1º btn (me despliega el texto que le corresponde,claro) y luego pulso el 2º, el texto de este se despliega sobre el primer texto y así pasa con el tercero. Quise arreglarlo pero no logro hacerlo, aquí les dejo el código:

<pre lang='javascript' lineno='1'>
<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>

No sé si me permitirán en este foro y por ser nueva, daros el enlace hacia el ejemplo funcionando, lo voy a intentar: www.monicadiaz.com.ar/proj/andrea/cv.html  Gracias desde ya.

Answer 1

Hola lo probe y funciono.

Espero te sirva.

<pre>
   <script type="text/javascript">
        $(document).ready(function(){
            $(".btn1").click(function (){

                $("#publ").slideUp("slow");
                $("#colec").slideUp("slow");
                $("#ind").slideToggle("slow");
                visibility:true;
                (this).toggleClass("active");
            });
            $(".btn2").click(function (){

                $("#ind").slideUp("slow");
                $("#publ").slideUp("slow");
                $("#colec").slideToggle("slow");
                (this).toggleClass("active");
                visibility:true;
            });
            $(".btn3").click(function (){

                $("#ind").slideUp("slow");
                $("#colec").slideUp("slow");
                $("#publ").slideToggle("slow");
                (this).toggleClass("active");
                visibility:true;
            });
        });
    </script>

Answer 2

Buenas,

Yo he probado con el hide() y me ha funcionado:



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