Collapsible Panel

by darrenarbell

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://methvin.com/splitter/jquery.cookie.js"></script>
<div class="container-fluid">
<div class="row-fluid accordion" id="MySplitter">
  <div class="accordion-group splitter-pane">
    <div class="accordion-heading">
      <a class="accordion-toggle" id="topPanel">
        Collapsible Group Item #1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse in">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class="accordion-group splitter-pane">
    <div class="accordion-heading">
      <a class="accordion-toggle" id="bottomPanel">
        Collapsible Group Item #2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

html{
    height: 100%;
}

body {
    height: 100%;
    width: 100%;
    position: absolute;
}


.container-fluid,
.row-fluid { height: inherit; }

.collapsibleContainer
{
    border: solid 1px #9BB5C1;
}




.splitter-pane {
   height:50%;
    background:#fff;
    overflow-y:auto;
    overflow: auto;
}

.splitter-bar-horizontal {
    height: 10px; !important;

    background-repeat: no-repeat;
    background-position: right;
}

.bar{
    height:10px; !important;
    /*border-top: 1px solid silver;
    border-bottom: 1px solid silver;*/
    text-align: center;
}

.splitter-handle-wrapper{
    position: relative;
top: 20%;
    width: 60px;
    margin: 0 auto;
}

.splitter-caret
{
border-top-color: silver !important;
border-bottom-color: silver  !important;
}

.splitter-handle{
/*background-color :silver;*/
     border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    height: 2px;
    width: 30px;
}

.rotate    {  
    -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    /* filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5); */
    -ms-transform:rotate(180deg);
    
}

JavaScript

/*
 * jQuery.splitter.js - two-pane splitter window plugin
 *
 * version 1.6 (2010/01/03)
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */

/**
 * The splitter() plugin implements a two-pane resizable splitter window.
 * The selected elements in the jQuery object are converted to a splitter;
 * each selected element should have two child elements, used for the panes
 * of the splitter. The plugin adds a third child element for the splitbar.
 *
 * For more details see: http://methvin.com/jquery/splitter/
 *
 *
 * @example $('#MySplitter').splitter();
 * @desc Create a vertical splitter with default settings
 *
 * @example $('#MySplitter').splitter({type: 'h', accessKey: 'M'});
 * @desc Create a horizontal splitter resizable via Alt+Shift+M
 *
 * @name splitter
 * @type jQuery
 * @param Object options Options for the splitter (not required)
 * @cat Plugins/Splitter
 * @return jQuery
 * @author Dave Methvin ([email protected])
 */
;
(function($) {

    var splitterCounter = 0;

    $.fn.splitter = function(args) {
        args = args || {};
        return this.each(function() {
            if ($(this).is(".splitter")) // already a splitter
                return;
            var zombie; // left-behind splitbar for outline resizes

            function setBarState(state) {
                bar.removeClass(opts.barStateClasses).addClass(state);
            }

            function startSplitMouse(evt) {
                if (evt.which != 1) return; // left button only
                bar.removeClass(opts.barHoverClass);
                if (opts.outline) {
                    zombie = zombie || bar.clone(false).insertAfter(A);
                    bar.removeClass(opts.barDockedClass);
                }
                setBarState(opts.barActiveClass)
                // Safari selects A/B text on a move; iframes capture mouse events so hide them
               ...