Объедините два скрипта вкладки, чтобы сделать один

Question

Я был бы признателен, если бы кто-то смог объединить два сценария, найденные ниже. Я хотел бы иметь возможность сочетать гладкие коллапсирующие функциональные возможности первого скрипта с функциональностью с одной вкладкой, расширяемой по времени от второго скрипта. Я не смог полностью добавить код, поэтому, если нужно, обратитесь к ссылке.

Я был бы очень признателен!

Сценарий 1: (полная - 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 
}); 

Сценарий 2: (полная - 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

Попробуйте это:

Вот 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); 

}); 
}); 

Надеюсь, это поможет