Betshop hideShow Classed

by amindunited

HTML

<!-- SOF Accordian Example -->
<h1>Accordian Example</h1>
<div class="accordianWrap">
    <ul class="collapsible">
        <li>Group 01 - Item 01</li>
        <li>Group 01 - Item 02</li>
        <li>Group 01 - Item 03</li>
        <li>Group 01 - Item 04</li>
    </ul>
    <div class="trigger">&#9660;</div>
</div>
<div class="accordianWrap">
    <ul class="collapsible">
        <li>Group 02 - Item 01</li>
        <li>Group 02 - Item 02</li>
        <li>Group 02 - Item 03</li>
        <li>Group 02 - Item 04</li>
    </ul>
    <div class="trigger">&#9660;</div>
</div>
<div class="accordianWrap">
    <ul class="collapsible">
        <li>Group 03 - Item 01</li>
        <li>Group 03 - Item 02</li>
        <li>Group 03 - Item 03</li>
        <li>
        <div class="singleWrap">
            <ul  class="subCollapsible">
                <li>Single - Item 01</li>
                <li>Single - Item 02</li>
                <li>Single - Item 03</li>
                <li>Single - Item 04</li>
            </ul>
            <div class="subTrigger">&#9660;</div>
        </div>
        </li>
    </ul>
    <div class="trigger">&#9660;</div>
</div>
<!-- EOF Accordian Example -->

<!--
<div class="singleWrap">
    <ul>
        <li>Single - Item 01</li>
        <li>Single - Item 02</li>
        <li>Single - Item 03</li>
        <li>Single - Item 04</li>
    </ul>
    <div class="trigger">&#9660;</div>
</div>
-->

CSS

.accordianWrap {
    width: 300px;
}
.accordianWrap li, .singleWrap li {
    padding-left:10px;
}
.trigger {
    text-align:center;
}


/*    just for looks  */
ul {
 background-color: #e9e9e9;
    opacity: .75;
}
ul ul {
 background-color: #c9c9c9;
    opacity: .75;
}
.trigger{

 background-color: #a9a9a9;
    opacity: .75;
} 
.subTrigger {
    
 background-color: #999999;
    opacity: .75;
}
ul, li, .trigger, .subTrigger {
    border:solid 1px gray;
}

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 that = $(elms);
        var settings = {};
        settings = options;
        settings.group = elms;
        
        var methods = {
            init : function(){
                var allData = options;
                allData.group = $(that);
                $(that).data("betshopHideShow", allData);
                $(that).each(function(i, elm){
                    $(elm).data("betshopHideShow", allData);
                    $(elm).find(allData.contentSelector).first().hide().addClass(allData.closedClass);
                    $(allData.triggerSelector, elm).html(allData.closedText);
                })
                methods.setListeners();
                $(that).first().find(allData.triggerSelector).first().click().html(allData.openText);
                
                return that;
            },
            setListeners : function(){
                var settings = $(that).first().data('betshopHideShow');
                $(settings.group).each(function (i, obj){
                    var settings = $(obj).data('betshopHideShow');
                    $(settings.triggerSelector, obj).click( methods.clickFn);
                })
            },
            clickFn : function(e){
                var data = $(that).first().data('betshopHideShow');
                var settings = data;
                var targ = $(e.target).closest(data.group);
                targ = $(data.contentSelector, targ).first();
                
               ...