Tengo este código js, que muestra y oculta contenido en una página después de hacer clic en un botón. Agregué un segundo script (slickbox2), que hace lo mismo con otro contenido haciendo clic en el segundo botón. El problema que necesito resolver es que cuando se muestra el primer contenido y hago clic en el segundo botón, quiero ocultar el primer contenido. ¡Gracias!

jQuery(document).ready(function() {
    //hides the slickbox as soon as the DOM is ready
    jQuery('#slickbox').hide();

    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle').click(function() {
        jQuery('#slickbox').toggle(400);
        return false;
    });

    jQuery('#slickbox2').hide();
    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle2').click(function() {
       jQuery('#slickbox2').toggle(400);
       return false;
    });

});
0
culter 27 jul. 2011 a las 19:24

4 respuestas

La mejor respuesta

Cambió algunos puntos.

$(document).ready(function(){
    $('[id*=slickbox]').hide(); //hide your slickboxs

    $('#slick-toggle').click(function(){
        $('#slickbox').show();
        $('#slickbox2').hide();
    });

    $('#slick-toggle2').click(function(){
        $('#slickbox').hide();
        $('#slickbox2').show();
    });
});
1
cillierscharl 28 jul. 2011 a las 06:48

Por cierto, puede usar $ en lugar de jQuery en todo su código:

jQuery('#slick-toggle2').click(function() {
    jQuery('#slickbox2').toggle(400);
    $('#slickbox1').toggle(400);
    return false;
});
1
Jason Kaczmarsky 27 jul. 2011 a las 15:27

Puede usar la función hide () para ocultar siempre el primer contenido al hacer clic en el segundo botón

jQuery('#slick-toggle2').click(function() {
  jQuery('#slickbox').hide(400);
  jQuery('#slickbox2').toggle(400);
  return false;
});

No use alternar o el contenido aparecerá si estaba oculto

1
jasalguero 27 jul. 2011 a las 15:46

En primer lugar, debe dar clase a todos los slickboxes, p. slickbox entonces tu Javascript sería como

    <script type="text/javascript">
    jQuery(document).ready(function() {
        $('.slickbox').hide();      //hides all elements with class slickbox

        $('.slickbox').click(function(){
             $('.slickbox').hide();
             $(this).toggle(400);
        })
    });
    </script>
1
Ehtesham 27 jul. 2011 a las 15:32