jquery - これらの機能を組み合わせるにはどうすればよいですか?

Question

これらは両方とも機能しますが、同時には機能しません。もう一方が機能するには、一方を無効にする必要があります。2つを組み合わせる方法はありますか？私がしたいのは、同じクリックでモーダル ウィンドウを起動し、いくつかの CSS をいくつかの要素に適用することだけです。

http://jsfiddle.net/fDP5X/4/

<script type="text/javascript">//Product Popup
    $(document).ready(function() {
    $(".various").fancybox({
        padding     : 0,
        fitToView   : false,
        width       : '500',
        height      : '380',
        autoSize    : false,
        closeClick  : true,
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        closeBtn    : true,
        scrolling   : 'no',
        preload     : false,
        helpers     : {
            overlay : {
                closeClick : true,
                css        : {'background' : 'rgba(0, 0, 0, 0)'},
                }
            }
        });
    });
</script>  

---

<script type="text/javascript">//Product Details popup and darken
$(function() {
    $( ".various" ).toggle(
        function() {
            $( "#tabDetails,.active h2,.active" ).animate({
                backgroundColor: "#c9c9c9",
            }, 250 );
        },
        function() {
            $( "#tabDetails,.active h2,.active" ).animate({
                backgroundColor: "#fff",
            }, 750 );
        }
        );
    $( ".turnwhite" ).click(
        function() {
            $( "#tabDetails,.active" ).animate({
                backgroundColor: "#fff",
            }, 750 );
            $( "#tabContaier ul li a h2" ).addClass("tabheaderbackground");
            $( "#tabContaier ul li a" ).css("background-color", "#FFF");
            $( "#tabContaier ul li a h2" ).css("background-color", "#FFF");
        }
    );

});
</script>