jquery - How Do I combine these functions?

Question

These both work but not at the same time. I have to disable one for the other to work. Is there a way to combine the two? All I want to do is on the same click, fire the modal windows and apply some CSS to a few elements.

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>