Combine two tab scripts to make one

Question

I would appreciate it if someone could combine the two scripts found below. I would like to be able to combine the smooth collapsing functionality of the first script with the single-tab-expanding-at-a-time functionality from the second script. I couldn't add the the code completely so please refer to the link if needed.

I would really appreciate this!

Script 1: (complete -http://jsfiddle.net/HcJJZ/3/)

$(document).ready(function() {
$.effects.effect.heightFade = function(o, done) {
    var el = $(this),
        mode = $.effects.setMode(el, o.mode || "show");
    el.animate({
        height: mode,
        opacity: mode
    }, {
        queue: false,
        complete: done
    });
};
$('.mytabs').tabs({
    hide: "heightFade",
    show: "heightFade",
    collapsible: true,
    selected: -1 
});

Script 2: (complete - http://jsfiddle.net/fb0z3ezd/4/)

var inactiveOpts = {
active: false,
show: {
    effect: 'blind'
}
var $tabs = $(".tabs").each(function () {
var currTab = this,
    tabsOpts = {
        collapsible: true,
        beforeActivate: function (evt, ui) {
            $tabs.not(this).tabs("option", inactiveOpts)
        },
        activate: function (evt, ui) {
            $(currTab).tabs('option', {
                show: false
            });
        }
    }
$.extend(tabsOpts, inactiveOpts);
$(this).tabs(tabsOpts);

Answer 1

Try this:

Here is JSFIDDLE: enter link description here

  $(document).ready(function() {
    $.effects.effect.heightFade = function(o, done) {
        var el = $(this),
            mode = $.effects.setMode(el, o.mode || "show");
        el.animate({
            height: mode,
            opacity: mode
        }, {
            queue: false,
            complete: done
        });
    };
    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "fade",
        pauseOnHover: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "fade",
        slideshow: false,
        pauseOnHover: true,
        useCSS: false,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });
var inactiveOpts = {
    active: false,
    show: {
        effect: 'blind'
    }
}

var $tabs = $(".tabs").each(function () {
    var currTab = this,
        tabsOpts = {
            collapsible: true,
            beforeActivate: function (evt, ui) {
                $tabs.not(this).tabs("option", inactiveOpts)
            },
            activate: function (evt, ui) {
                $(currTab).tabs('option', {
                    show: false
                });
            }
        }
    $.extend(tabsOpts, inactiveOpts);
    $(this).tabs(tabsOpts);

});
});

Hope it helps