Adjustable frame layout

by amindunited

HTML

<div id="emAppMap">
    <div class="classTemplate">
        <div class="class" data-attribute-id="">
            <div class="handle">
                <div class="name col col50">Title</div>
                <div class="type col col50">View</div>
            </div><!-- Handle -->
            
            <div class="body">
                
                <div class="details accordianWrap">
                    <div class="detailsTitle subHead">Details</div>
                    <ul class="collapsible">
                        <li class="detail" data-attribute-key="">
                            <div class="col col50 key">key</div>
                            <div class="col col50 value">Value</div>
                        </li>
                    </ul>
                    <div class="trigger">+</div>
                </div>
                
                <div class="bindings accordianWrap">
                    <div class="bindingsTitle subHead">Bindings</div>
                    <ul class="collapsible">
                        <li class="binding" data-attribute-key="">
                            <div class="col col50 key">key</div>
                            <div class="col col50 value">Value</div>
                        </li>
                    </ul>
                    <div class="trigger">+</div>
                </div>
            </div><!-- .body -->
        </div><!-- .class -->
    </div><!-- .classTemplate -->
</div><!-- .emAppMap -->

CSS

/* SOF Grid */
#emAppMap .col {
    display:inline-block;
    vertical-align: top;
}
#emAppMap .col10 { width: 9% }
#emAppMap .col15 { width: 14% }
#emAppMap .col25 { width: 24% }
#emAppMap .col33 { width: 32% }
#emAppMap .col50 { width: 49% }

/* EOF Grid */
#emAppMap .class {
    width: 50%;
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 1px gray;
    overflow: hidden;
}
#emAppMap .class .handle {
    background-color: #cdcdcd;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: groove 2px #dedede;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    cursor: pointer;
    font-size: 9pt;
    font-weight: bold;    
}
#emAppMap .class .handle .name{
    display: inline-block;
    margin-left: 5px;
}
#emAppMap .class .handle .type{
    display: inline-block;
    margin-left: 5px;
}
#emAppMap .class .body {
    //border-left: solid 1px gray;
    //border-right: solid 1px gray;
    border-bottom: solid 1px gray;
}
#emAppMap .class .body .details .detailsTitle, #emAppMap .class .body .bindings .bindingsTitle{
    background-color: #efefef;
    border-bottom: solid 1px gray;
    padding-left: 5px;
}
#emAppMap .class .body .bindings .binding:nth-child(odd){
    background-color: #ededed;
}

#emAppMap .class .accordianWrap {
    width: 100%;
}
#emAppMap .accordianWrap li, .singleWrap li {
    padding-left:10px;
}
#emAppMap .trigger {
    text-align:center;
}


/*    just for looks  */
ul {
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    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

//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//SOF Deepest
(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 );
// EOF Deepest
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
//SOF Dropdown
/* ------------- 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');
                   ...