$(document).ready(function() {

    $("#pnl1").click(function() {
        $("#panel1").slideToggle("slow");
        $(this).toggleClass("active");

        if (($(this).is('.active'))) {
            var targetOffset = $(this).offset().top;
            $('html,body').animate({ scrollTop: targetOffset }, 1000);
        }
        else {
            $('html,body').animate({ scrollTop: 0 }, 1000);
        }

    });
    $("#pnl2").click(function() {
        $("#panel2").slideToggle("slow");
        $(this).toggleClass("active");
        if (($(this).is('.active'))) {
            var targetOffset = $(this).offset().top;
            $('html,body').animate({ scrollTop: targetOffset }, 1000);
        }
        else {
            $('html,body').animate({ scrollTop: 0 }, 1000);
        }

    });
    $("#pnl3").click(function() {
        $("#panel3").slideToggle("slow");
        $(this).toggleClass("active");
        if (($(this).is('.active'))) {
            var targetOffset = $(this).offset().top;
            $('html,body').animate({ scrollTop: targetOffset }, 1000);
        }
        else {
            $('html,body').animate({ scrollTop: 0 }, 1000);
        }

    });

});