Drop down menu (jQuery-UI)

by amindunited

HTML

<script src="https://raw.github.com/jquery/jquery-ui/master/ui/jquery.ui.core.js"></script>
<div class="top_menu_wrapper">
    <div class="top_menu_content 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" openchar="&#9660;" closechar="&#9650;">&#9650;</div>
</div>
<!-- Second group -->
<div class="top_menu_wrapper_2">
    <div class="top_menu_content_2 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_2" openchar="&#9660;" closechar="&#9650;">&#9660;</div>
</div>
<!-- Third group -->
<div class="top_menu_wrapper_3">
    <div class="top_menu_content_3 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 03</li>
            <li>Set 03 Item B 04</li>
       ...

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 group  ------------------------------*/
.top_menu_wrapper_2  { background-color:#738f00;}
.top_menu_wrapper_2 .top_menu_handle_2 {
    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, ...

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 );

(function( $ ) {
  $.fn.betshopdropdown = function(trigger, target, open_text, close_text) {
    
    $(trigger).click( function(e) {
        var targ = $(this).siblings(target)
        if ( targ.is('.active') ) {
            targ.hide("blind").removeClass('active');
            //$(this).html(open_text);
            $(trigger).deepest().html(open_text);
        } else {
          targ.show('blind').addClass('active');
            //$(this).html(close_text);
            $(trigger).deepest().html(close_text);
          }
    })
  };
})( jQuery );

$(function(){ 

    $('.top_menu_handle').betshopdropdown('.top_menu_handle', '.top_menu_content', '&#9660;', '&#9650;')
    $('.top_menu_handle_2').betshopdropdown('.top_menu_handle_2', '.top_menu_content_2', 'Up', 'Down')
    $('.top_menu_handle_3').betshopdropdown('.top_menu_handle_3', '.top_menu_content_3', 'Open', 'Close')
    //$('.top_menu_handle_3').betshopdropdown.group = ["me", "you"];
    //console.log($('.top_menu_handle_3').betshopdropdown);
    $('.top_menu_handle').click();
    $('.top_menu_handle_2').click();
    //$('.top_menu_handle_3').click();
    //console.log($('.top_menu_handle_3').deepest('*'));
})