splitter collapse toggle

jquery:ui resize with clickable collapse toggle

by David McClelland

HTML

<div id="twStudioBody">
  <div class="tw-container container-row ide">
    <div class=" dock center-col tw-container container-col" id="design">
      <div class="FixedHeightContainer">
        <h2>Title</h2>

        <div class="Content" id="layout">
          <div class="text">blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah blah blah... ..blah
            blah blah... blah... ..blah blah blah... ..blah</div>
          <div id="handle" class="ui-resizable-handle ui-resizable-s handle">
            <div class="clicker"></div>
          </div>
        </div>
        <div id="console">
          <div class="text">console<br />console<br />console<br />console<br />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.FixedHeightContainer {
  width: 250px;
  padding: 3px;
  background: #f00;
}

#console {
  width: 250px;
  padding: 3px;
  background: #f00;
}

#twStudioBody {
  background: -webkit-linear-gradient(100deg, #772953, #e95420);
  background: linear-gradient(-10deg, #772953, #e95420);
  /*min-height: 100vh;*/
  height:300px;
  font-size: 18px;
  /*left:0;
  position:absolute;*/
}

.text {
  position: relative;
  height: 100%;
  overflow: auto;
  background: #fff;
}

#layout {
  background: #fff;
  height: 224px;
}

.container-col {
  flex-flow: column nowrap;
}

.container-row {
  flex-flow: row nowrap;
  height: 100%;
  justify-content: flex-start;
  align-content: stretch;
  align-self: stretch;
}

.center-col {
  flex: 1 0 auto;
  padding: 0 4px 0 4px;
}

.dock {
  display: flex;
  justify-content: flex-start;
  align-content: stretch;
  align-items: flex-start;
  align-self: stretch;
  min-height: 320px;
}

.handle {
  height: 8px;
  background: #00aa00;
  bottom: 0;
  position: absolute;
  display: flex;
  justify-content: center;
}

.clicker {
  height: 8px;
  width: 24px;
  background-color: black;
}

JavaScript

var collapse = function() {
  alert("collapse!");
}
var clicker = $(".clicker");
var resizableBox = $("#layout");
var startTime, endTime, elapsedTime;

$(document).ready(function() {
  resizableBox.resizable({
    handles: "s"
  });
});

clicker.on("mouseup", function(e) {
  var date = new Date();
  endTime = date.getTime();
  elapsedTime = endTime - startTime;
  if (elapsedTime < 100) {
    collapse(e);
  }
});

clicker.on('mousedown', function(e, elem) {
  startTime = new Date().getTime();
  simulateHandleClick(resizableBox, 's', event.pageX, event.pageY);
})

function simulateHandleClick(item, handle, x, y) {
  item.find('.ui-resizable-' + handle).trigger('mouseover')
  item.find('.ui-resizable-' + handle).trigger({
    type: 'mousedown',
    which: 1,
    pageX: x,
    pageY: y
  })
}