How Do I combine these functions?
<p>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.</p>

<p><a href="http://jsfiddle.net/fDP5X/4/" rel="nofollow">http://jsfiddle.net/fDP5X/4/</a></p>

<pre><code>&lt;script type="text/javascript"&gt;//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)'},
                }
            }
        });
    });
&lt;/script&gt;  
</code></pre>

<hr>

<pre><code>&lt;script type="text/javascript"&gt;//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");
        }
    );

});
&lt;/script&gt;
</code></pre>
