jquery ui tabs slide up effect

Question

У меня есть вкладки jquery ui, но я хочу добавить слайд и слайд вниз анимации. В настоящее время, когда вы нажимаете кнопку, он просто открывается и закрывается. Как добавить эффект слайда к существующему коду jquery?

jQuery(document).ready(function ($) { 
    $(".tabs").tabs({ 
     collapsible: true, 
     active: 'none' 
    }); 
    return false; 
}); 

Answer 1

Ниже приведен код

HTML

<div class="tabs"> 
    <ul> 
    <li><a href="#tabs-1">Tab 1</a> 
    </li> 
    <li><a href="#tabs-2">Tab 2</a> 
    </li> 
    <li><a href="#tabs-3">Tab 3</a> 
    </li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Content for Tab 1</p> 
    </div> 
    <div id="tabs-2"> 
    <p>Content for Tab 2</p> 
    </div> 
    <div id="tabs-3"> 
    <p>Content for Tab 3</p> 
    </div> 
</div> 
<div id="tabid"></div> 

JS

jQuery(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 
    }); 
    }; 

    $(".tabs").tabs({ 
    collapsible: true, 
    active: 'none', 
    hide: "heightFade", 
    show: "heightFade", 
    }); 
    return false; 
}); 

Демо: https://jsfiddle.net/gpeczyff/1/