jQuery.tabSlideOut Demo

index.html

<script
			  src="https://code.jquery.com/jquery-3.2.1.min.js"
			  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
			  crossorigin="anonymous"></script>
<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>
		<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>
          </ol>
      </div>
		</div>

		<div id="top">
			<a class="handle ui-slideouttab-handle-rounded">Top (hover)</a>
			<p>This tab is set to bounce faster, longer, and less than the default values used by the other tabs.</p>
			<p>It is also offset from the right side, and its tab is offset from the right too.</p>
			<textarea rows="4">This is some content which can be resized by the button below.</textarea>
		</div>

		<div id="bottom">
			<a class="handle ui-slideouttab-handle-rounded">Bottom<i class="fa fa-icon fa-user"></i></a>
			<p>This panel closes automatically when somewhere else is clicked, except another panel (default behaviour).</p>
			<p>It has both an offset and an otherOffset, meaning its edges stay a constant distance from the viewport edges.</p>
			<textarea rows="4">This is some content which can be resized by the button in the main window.</textarea>
		</div>

		<h2>Methods</h2>
		<p>Open, close, toggle and bounce programmatically:</p>
		<button id="open" class="lefty">Click to open Left</button>
		<button id="close" disabled="true" class="lefty">Click to close Left</button>
		<button id="toggle" class="lefty">Click to toggle Left</button>
		<button id="bounce">Click to bounce all</button>
		<button id="expand">Click to resize textareas</button>
				
		<h2>Events</h2>
		<p>
			Each slideoutabxxxxx event will be recorded below.
		</p>
		<pre id="events"></pre>

jquery-tabslideout-demo.markdown

jQuery.tabSlideOut Demo

A Pen by Stan Williams on CodePen.

License.

script.js

$(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 = $(n);
			ta.attr('rows','10').attr('cols','60');
		});
	});

	/* bounce every tab */
	$('#bounce').click(function(e){
		$('.ui-slideouttab-panel').each(function(i,n){
			var tab = $(n);
			tab.tabSlideOut('bounce');
		});
	});
    
    /* register event handler for every tab event, and show events on the page*/
    $(document).on('slideouttabopen slideouttabclose slideouttabbounce',function(event){
        var text = $(event.target).attr('id')+': '+event.type;
        $('#events').append(text+"\n");
    });
    
});

style.css

/* originally from  http://www.building58.com/examples/tabSlideOut.html */
</style>
 <link rel="stylesheet" href="https://cdn.rawgit.com/hawk-ip/jquery.tabSlideOut.js/v2.4/jquery.tabSlideOut.css"> 
<style type="text/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;
}

Demo:
https://codepen.io/Stanssongs/full/oMbaJj/