Problème de basculement de Jquery Slickbox

Question

Voici le code que j'utilise

$(document).ready(function(){
        $('#slickbox').hide();
        // toggles the slickbox on clicking the noted link
        $('a#slick-show').click(function() {
            $('#slickbox').show('slow');
            return false;
        });

        // hides the slickbox on clicking the noted link

        $('a#slick-hide').click(function() {
            $('#slickbox').hide('fast');
            return false;
        });
        // toggles the slickbox on clicking the noted link

        $('a#slick-toggle').click(function() {
            $('#slickbox').toggle(400);
            return false;
        });
    });

Voici le code HTML:

<div id="slickbox"> BLARGH</div>
<a href="#" id="slick-show">Show</a>
<a href="#" id="slick-hide">hide</a>
<a href="#" id="slick-toggle">toggle</a>

Afficher et masquer fonctionne parfaitement. Blargh est masqué lorsque le navigateur s'ouvre et je peux l'afficher et le masquer en cliquant sur les liens. Mon problème, c’est que lorsque je clique sur le bouton bascule, si de courtes diapositives s’ouvrent pour afficher blargh, puis les diapositives se ferment. Je peux cliquer dessus autant de fois que je le veux et cela fait la même chose. Comment puis-je l'obtenir pour qu'il reste affiché, puis cliquez à nouveau pour le cacher?

Answer 1

$('a#slick-toggle').click(function() {
    $('#slickbox').is(":visible") ? $('#slickbox').hide("fast") : $('#slickbox').show("slow");
    return false;
});

ou vous pouvez déclencher les clics des liaisons afficher / masquer, sans avoir à modifier l’implémentation de une # slick-toggle si vous décidez de modifier les animations:

$('a#slick-toggle').click(function() {
    $('#slickbox').is(":visible") ? $('a#slick-hide').trigger("click") : $('a#slick-show').trigger("click");
    return false;
});

Answer 2

$('a#slick-toggle').toggle(function() {
            $('#slickbox').show();
            return false;
        }, function() {
            $('#slickbox').hide();
        });