$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready (a little sooner that page load)
    $('#slickbox').hide();
    $('#slickbox2').hide();
    $('#slickbox3').hide();

    // shows and hides and toggles the slickbox on click  
    $('#slick-show').click(function() {
        $('#slickbox').show('slow');
        return false;
    });
    $('#slick-hide').click(function() {
        $('#slickbox').hide('fast');
        return false;
    });
    $('#slick-toggle').click(function() {
        $('#slickbox').toggle(400);
        return false;
    });

    // slides down, up, and toggle the slickbox on click    
    $('#slick-down').click(function() {
        $('#slickbox').slideDown('slow');
        return false;
    });
    $('#slick-up').click(function() {
        $('#slickbox').slideUp('fast');
        return false;
    });
    $('#slick-slidetoggle').click(function() {
        $('#slickbox').slideToggle(400);
        var iclass = $("#slick-slidetoggle").attr("class");

        if (iclass == "active")
            $("#slick-slidetoggle").attr("class", "");
        else {
            $("#slick-slidetoggle").attr("class", "active");
            $('#slickbox2').hide();
            $("#slick-slidetoggle2").attr("class", "");
        }


        return false;
    });

    $('#slick-slidetoggle2').click(function() {
        $('#slickbox2').slideToggle(400);

        var iclass = $("#slick-slidetoggle2").attr("class");

        if (iclass == "active")
            $("#slick-slidetoggle2").attr("class", "");
        else {
            $("#slick-slidetoggle2").attr("class", "active");
            $('#slickbox').hide();
            $("#slick-slidetoggle").attr("class", "");
        }


        return false;
    });


    $('#slick-slidetoggle3').click(function() {
        $('#slickbox3').slideToggle(400);
        return false;
    });
});