jQuery tabSlideOut Demo

Demonstration of jQuery tabSlideOut plugin author(s): Michael Fielding

by Kelly Hawker

HTML

<script src="https://use.fontawesome.com/2be9406092.js"></script>
<script src="https://cdn.rawgit.com/hawk-ip/jquery.tabSlideOut.js/v2.4/jquery.tabSlideOut.js"></script>
 <link rel="stylesheet" href="https://cdn.rawgit.com/hawk-ip/jquery.tabSlideOut.js/v2.4/jquery.tabSlideOut.css"> 
		<h1>jQuery.tabSlideOut Demo</h1>

		<div id="left">
			<a class="handle ui-slideouttab-handle-rounded">Left<i class="fa fa-icon fa-television"></i></a>
			<p>This panel doesn't close automatically when somewhere else is clicked.</p>
			<p>And it can be controlled from the buttons in the main window.</p>
			<p>Note also the support for Font Awesome icons in the tab handles.<p>
			<textarea rows="4">This is some content</textarea>
		</div>

		<div id="right">
			<a id="right-handle" class="handle ui-slideouttab-handle ui-slideouttab-handle-rounded">Right<i class="fa fa-icon fa-bank"></i></a>
      <div id="right-subpanel">      
        <p>This panel opens by default and shows how to achieve scrolling.</p>
        <p>
          This tab will close when when another part of the page is clicked, but not if the checkbox below is checked and never when a button is clicked.
        </p>
        <input type="checkbox" id="keepTabOpen" name="keepTabOpen" value="keepTabOpen">
        <label for="keepTabOpen">Keep tab open</label>
        <br>
        <textarea rows="4">This is some content which can be resized. When it's resized, the panel it's in might gain scroll bars.</textarea>
        <h2>
          Scrollbars
        </h2>
        <p>
          To achieve a panel that has scrollbars like this one, you need to:
          </p>
          <ol>
            <li>Put the scrolling content in a div inside your tabSlideOut panel with height: 100%. (If you don't do this, the tab handle will disappear due to the scrolling).</li>
            <li>Limit the height of your tabSlideOut using height, max-height or top/bottom/left/right CSS properties, or the otherOffset initialisation parameter.</li>
   ...

CSS

body {
    font-family: Open Sans, Helvetica, sans-serif;
}
#left {
    border-color: red;
}
#left .handle {
    background-color: red;
}
#right {
    border-color: orange;
    border-width: 5px;
    width: 20em;
}
#right .handle {
    background-color: orange;
}
#right-subpanel {
  height: 100%;
  overflow-y:auto;
}
#bottom {
    border-color: blue;
}
#bottom .handle {
    background-color: blue;
}
pre {
    margin-left: 3em;
}

JavaScript

$(document).ready(function() {
	
    var left = $('#left').tabSlideOut({
      tabLocation: 'left',
      clickScreenToClose: false,
      offset: '40px',
      offsetReverse: true, // offset from bottom, not top
      // handlers: enable and disable buttons when sliding open or closed
      onOpen: function(){
          $('#open').prop('disabled',true);
          $('#close').prop('disabled',false);
      },
      onClose: function(){
          $('#open').prop('disabled',false);
          $('#close').prop('disabled',true);
      }      
    });
    
    $('#right').tabSlideOut({
      tabLocation: 'right',
      offsetReverse: true, // position the panel from the bottom of the page, rather than the top
      otherOffset: '40px', // force panel to be fixed height (required to get the scrollbars to appear in the sub-panel)
      handleOffsetReverse: true, // position the tab from the bottom of the panel, rather than the top
      onLoadSlideOut: true, // open by default
	  /* don't close this tab if a button is clicked, or if the checkbox is set */
	  clickScreenToCloseFilters: [
			'button', // ignore button clicks
			function(event){ // custom filter
				// filters need to return true to filter out the click passed in the parameter
				return $('#keepTabOpen').is(':checked');
			}
	  ]
    });
    
    $('#top').tabSlideOut({
      tabLocation: 'top',
      action: 'hover',
      handleOffsetReverse: true,
      offsetReverse: true,
	  bounceTimes: 20,
	  bounceDistance: '10px',
	  bounceSpeed: 100
    });
    
    $('#bottom').tabSlideOut({
      tabLocation: 'bottom',  
      offset: '40px',
      otherOffset: '40px'
    });
	
    /* programmatically drive the left tab */
    $('button.lefty').click(function(event){
        left.tabSlideOut( /*extract command out of the id of the button`*/$(event.target).attr('id') );
    });
    
	/* expand the content in each tab */
	$('#expand').click(function(e){
		$('textarea').each(function(i,n){
			var ta =...