JavaScript Splitter

Set the showSplitBar property of the jqxSplitter. Author: http://jqwidgets.com

by Alexey Sharifullin

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxSplitter'>
    <div style="background-color: #97FFAF">
      <div class="expanded-content">
      ;lksd;klfds dnfmdnfnd fdmnfmdnfm fdmnfmdnf fdmnfmdnf
      </div>
      <div id="collapser" class="collapse-splitter">
      X
      </div>
      <div id="expander" class="expand-splitter" style="visibility:hidden">
      </div>
    </div>
    <div style="background-color: #E8C0AF">Text</div>
</div>

CSS

div.collapse-splitter {
  position: absolute;
  top: 3px;
  right:3px;
  cursor:pointer;
  
  width: 0; 
	height: 0; 
	border-bottom: 20px solid transparent;  /* left arrow slant */
	border-top: 20px solid transparent; /* right arrow slant */
	border-right: 20px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
  opacity: 0.5;
}

div.expand-splitter {
  position: absolute;
  top: 3px;
  right:3px;
  cursor:pointer;
  
  width: 0; 
	height: 0; 
	border-bottom: 20px solid transparent;  /* left arrow slant */
	border-top: 20px solid transparent; /* right arrow slant */
	border-left: 20px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
  opacity: 0.5;
}

JavaScript

$("#jqxSplitter").jqxSplitter({
    width: '300px',
    height: '300px',
    theme: 'energyblue',
    orientation: 'vertical',
    showSplitBar:false
});
/*
var panels;
$("#collapser").click(function(){
  panels = $('#jqxSplitter').jqxSplitter('panels');
	$("#jqxSplitter").jqxSplitter({ panels: [{ size: 25 }, { size: "100%"}] });
  $(".expanded-content").css("visibility", "hidden");
  $("#collapser").css("visibility", "hidden");
  $("#expander").css("visibility", "visible");
});
$("#expander").click(function(){
	$("#jqxSplitter").jqxSplitter({ panels: [{ size: panels[0].size }, { size: panels[1].size}] });
  $("#expander").css("visibility", "hidden");
  $(".expanded-content").css("visibility", "visible");
  $("#collapser").css("visibility", "visible");
});
*/