Drop down menu (jQuery-UI) v 2 params

by amindunited

HTML

<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.core.js"></script>
<div class="top_menu_wrapper tmw_1">
    <div class="top_menu_content collapse active">
        <ul>
            <li>Set 01 Item A 01</li>
            <li>Set 01 Item A 02</li>
            <li>Set 01 Item A 03</li>
            <li>Set 01 Item A 04</li>
        </ul>
        <ul>
            <li>Set 01 Item B 01</li>
            <li>Set 01 Item B 02</li>
            <li>Set 01 Item B 03</li>
            <li>Set 01 Item B 04</li>
        </ul>
        <ul>
            <li>Set 01 Item C 01</li>
            <li>Set 01 Item C 02</li>
            <li>Set 01 Item C 03</li>
            <li>Set 01 Item C 04</li>
        </ul>
    </div>
    <div class="top_menu_handle trigger" openchar="&#9660;" closechar="&#9650;">&#9650;</div>
</div>
<!-- Second group -->
<div class="top_menu_wrapper tmw_2">
    <div class="top_menu_content collapse active">
        <ul>
            <li>Set 02 Item A 01</li>
            <li>Set 02 Item A 02</li>
            <li>Set 02 Item A 03</li>
            <li>Set 02 Item A 04</li>
        </ul>
        <ul>
            <li>Set 02 Item B 01</li>
            <li>Set 02 Item B 02</li>
            <li>Set 02 Item B 03</li>
            <li>Set 02 Item B 04</li>
        </ul>
        <ul>
            <li>Set 02 Item C 01</li>
            <li>Set 02 Item C 02</li>
            <li>Set 02 Item C 03</li>
            <li>Set 02 Item C 04</li>
        </ul>
    </div>
    <div class="top_menu_handle trigger" openchar="&#9660;" closechar="&#9650;">&#9660;</div>
</div>
<!-- Third group -->
<div class="top_menu_wrapper tmw_3">
    <div class="top_menu_content collapse active">
        <ul>
            <li>Set 03 Item A 01</li>
            <li>Set 03 Item A 02</li>
            <li>Set 03 Item A 03</li>
            <li>Set 03 Item A 04</li>
        </ul>
        <ul>
            <li>Set 03 Item B 01</li>
            <li>Set 03 Item B 02</li>
            <li>Set 03 Item B...

CSS

.top_menu_wrapper { background-color: #efefef;}
.top_menu_wrapper .top_menu_handle {
    line-height:50px;
    text-align:center;
    clear:both;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.top_menu_wrapper .top_menu_content { clear:both; }
.top_menu_wrapper .top_menu_content ul { float:left; padding: 0px 0px 0px 0px; 

}
.top_menu_wrapper .top_menu_content ul li { 
    background-color:#ededed;
    opacity:.75; 
    padding: 2px 5px 2px 5px;
    border-top: solid .5px #999999;
    border-bottom: solid 1px #333333; 
    border-left: solid 1px #999999;
    border-right: solid 1px #333333;
} 

/*---------------------------------   second slider  ------------------------------*/
.tmw_2  { background-color:#738f00;}
 

/*---------------------------------   Third slider  ------------------------------*/
.tmw_3  { background-color:#00778e;}

.collapse { display:none;}
/* -------------------------------- SECOND GROUP --------------------------------*/
.group_2 {}
.group_2 .g2w {display:inline-block; clear:both; max-width:260px; };
.group_2 .collapse { display: inline-block; float:left; width: 200px;}
.group_2 .trigger { min-width: 50px; height: 50px; display: inline-block; float:left; }
.group_2 .trigger {
    line-height:50px;
   ...

JavaScript

(function( $ ) {
    //currently the selector must be "*"
    $.fn.deepest = function(selector){
        if (typeof (selector) === 'undefined') { selector = "*" };
                                                 
        var targ = $(this);
        while ( $(targ).children(selector).length ) {
            targ = $(targ).children(selector);
        }
        return targ;
    };
})( jQuery );


/* ------------- New Function ---------------------*/
(function( $ ){

    var betshopdropdownClass = function( elms, options ) {
        
        var settings = {};
        settings = options;
        settings.group = elms;
                              
        $(settings.group).each(function (i, obj){
            $(settings.triggerSelector, obj).click( function(e) {
                var targ = $(this).siblings(settings.contentSelector)
                if ( targ.is('.active') ) {
                    targ.hide(settings.animationParams).removeClass('active');
                    if (settings.swapText) {
                        if ($(this).deepest) {
                            $(this).deepest().html(settings.closeText);
                        } else { 
                            $(this).html(settings.closeText); 
                        } 
                    }
                
                } else {
                    
                    if (settings.hideOthers){
                        $((settings.contentSelector+".active"), settings.group)
                            .siblings(settings.triggerSelector)
                            .click();                    
                    }
        
                    targ.show(settings.animationParams).addClass('active');
                    
                    if (settings.swapText) {
                        if ($(this).deepest) {
                            $(this).deepest().html(settings.openText);
                        } else { 
                            $(this).html(settings.openText); 
                        }
 ...