/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style id="jsbin-css">
body, html {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  background-color: lightgrey;
  width: 100%;
  height: 100vh;
}

.sidebar {
  height: 100vh;
  position: relative;
  background-color: firebrick;
  float: left;
  transition: width 250ms ease;
}

.sidebar.open {
  width: 260px;
}

.sidebar.half-open {
  width: 120px;
}

.sidebar.closed {
  width: 60px;
}

.blocks, .settings {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  float: left;
  width: 60px;
  height: 50vh;
  padding-top: 50vh;
  transition: width 250ms ease;
  overflow: hidden;
}

.blocks {
  background-color: lightblue;
  z-index: 10;
}

.settings {
  background-color: yellow;
  z-index: 5;
  left: 60px;
}

.blocks.closed, .settings.closed {
  width: 60px;
}

.blocks.open {
  width: 260px;
}

.settings.open {
  width: 200px;
}

.settings.hidden {
  width: 0px;
}

.content {
  position: relative;
  background-color: grey;
  float: left;
  transition: width 250ms ease;
}

.content.wide {
  width: calc(100% - 60px);
}

.content.narrow {
  width: calc(100% - 260px);
}

.content.narrow-wide {
  width: calc(100% - 120px);
}

.editor,.preview {
  width: 50%;
  float: left;
  height: 99vh;
  text-align: center;
  padding-top: 1vh;
}

.editor {
  background-color: teal;
}

.preview {
  background-color: red;
}
</style>
</head>
<body>
<div>
  <div class="wrapper">
    <div class="sidebar open">
      <div class="blocks open">Blocks</div>
      <div class="settings closed">Settings</div>
    </div>
    <div class="content narrow">
      <div class="editor">
        <div>
          <p>Bacon ipsum dolor amet chuck swine prosciutto bacon, porchetta doner pork chop boudin filet mignon cupim leberkas meatloaf beef drumstick chicken. Ground round venison pancetta, pig meatloaf alcatra beef ribs jerky chuck jowl corned beef tongue kielbasa. Meatball jerky short ribs, ball tip flank pork belly sausage beef ribs salami spare ribs beef doner pastrami. Turkey corned beef filet mignon flank shankle. Frankfurter porchetta boudin, pork chop tri-tip filet mignon salami tenderloin strip steak shankle capicola ribeye ham hock pork. Tongue fatback salami pork loin prosciutto.</p>

<p>Pig chuck pork, strip steak sirloin t-bone doner corned beef kielbasa cow pastrami brisket turducken flank. Ground round kielbasa bacon cupim, hamburger alcatra beef tongue shankle chuck turkey ribeye. Drumstick swine meatball pancetta sirloin venison. Shankle tenderloin short ribs hamburger doner corned beef frankfurter pork belly ball tip pastrami jowl. Hamburger fatback turducken, pastrami beef ribs corned beef ham hock tri-tip alcatra andouille. Flank sausage strip steak, capicola pastrami bacon hamburger jowl pork belly alcatra.</p>

<p>Meatloaf jowl alcatra meatball boudin t-bone salami landjaeger. Hamburger pork belly cow corned beef rump. Sirloin shoulder ribeye chuck, porchetta sausage turducken beef kevin strip steak fatback flank frankfurter pastrami salami. Capicola corned beef sausage shoulder turducken short ribs kevin jowl short loin pork belly kielbasa bresaola.</p>

<p>Drumstick tenderloin shoulder turducken, sirloin kevin flank turkey kielbasa capicola pancetta ground round pig tail boudin. Pastrami porchetta shoulder strip steak beef ribs shankle cupim bresaola jowl sirloin bacon spare ribs pork loin tri-tip. Pancetta brisket leberkas, rump tail andouille salami chicken ground round drumstick capicola short ribs meatball meatloaf biltong. Ribeye tri-tip pork loin ham hock leberkas hamburger bacon jerky. Porchetta pork loin corned beef sirloin rump salami. Ribeye shankle pig, kielbasa ham pork chop doner frankfurter chicken pork belly hamburger pork jowl tri-tip bacon. Landjaeger kevin shank, boudin bacon biltong short loin strip steak ground round cupim alcatra ribeye beef ribs pork belly prosciutto.</p>

<p>Ribeye shank alcatra ham hock leberkas shoulder pork t-bone kevin salami hamburger pastrami. Swine pig pork loin tongue pastrami porchetta cow biltong fatback pancetta bresaola cupim. Pork pork belly jowl corned beef shank, filet mignon chuck sausage landjaeger. Shankle frankfurter chuck, turducken beef jowl boudin filet mignon rump. Turducken jerky t-bone porchetta, prosciutto salami ribeye landjaeger beef picanha strip steak capicola pig. Ball tip kielbasa shank rump. Kevin capicola beef cow.</p>
        </div>
      </div>
      <div class="preview">
        <div>Preview</div>
        <button id="open_blocks">Open Blocks</button><br/>
        <button id="open_settings">Open Settings</button><br/>
        <button id="close_both">Close Both</button><br/>
        <button id="minimize_settings">Minimize Settings</button><br/>
        <button id="hide_settings">Hide Settings</button><br/>
        <button id="show_settings">Show Settings</button><br/>
      </div>
    </div>
  </div>
</div>
<script id="jsbin-javascript">
'use strict';

var $sidebar;
var $blocks;
var $settings;
var $content;

$(document).ready(function () {
  $sidebar = $('.sidebar');
  $blocks = $('.blocks');
  $settings = $('.settings');
  $content = $('.content');

  $('#open_blocks').on('click', function () {
    openBlocks();
    closeSettings();
    narrowContent();
  });
  $('#open_settings').on('click', function () {
    showSettings();
    openSettings();
    closeBlocks();
    narrowContent();
  });
  $('#close_both').on('click', function () {
    closeSettings();
    closeBlocks();
    closeSidebar();
    hideSettings();
    wideContent();
  });
  $('#minimize_settings').on('click', function () {
    closeSettings();
    narrowWideContent();
    halfOpenSidebar();
  });
  $('#hide_settings').on('click', function () {
    hideSettings();
  });
  $('#show_settings').on('click', function () {
    showSettings();
  });
});

function narrowWideContent() {
  $content.removeClass('narrow');
  $content.removeClass('wide');
  $content.addClass('narrow-wide');
}

function narrowContent() {
  $content.addClass('narrow');
  $content.removeClass('wide');
  $content.removeClass('narrow-wide');
}

function wideContent() {
  $content.addClass('wide');
  $content.removeClass('narrow');
  $content.removeClass('narrow-wide');
}

function openSidebar() {
  $sidebar.addClass('open');
  $sidebar.removeClass('closed');
  $sidebar.removeClass('half-open');
}

function closeSidebar() {
  $sidebar.addClass('closed');
  $sidebar.removeClass('open');
  $sidebar.removeClass('half-open');
}

function halfOpenSidebar() {
  $sidebar.removeClass('open');
  $sidebar.removeClass('close');
  $sidebar.addClass('half-open');
}

function openBlocks() {
  openSidebar();
  $blocks.addClass('open');
  $blocks.removeClass('closed');
}

function closeBlocks() {
  $blocks.addClass('closed');
  $blocks.removeClass('open');
}

function openSettings() {
  openSidebar();
  $settings.addClass('open');
  $settings.removeClass('closed');
}

function closeSettings() {
  $settings.addClass('closed');
  $settings.removeClass('open');
}

function hideSettings() {
  $settings.addClass('hidden');
}

function showSettings() {
  $settings.removeClass('hidden');
}
</script>


<script id="jsbin-source-css" type="text/css">body, html {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  background-color: lightgrey;
  width: 100%;
  height: 100vh;
}

.sidebar {
  height: 100vh;
  position: relative;
  background-color: firebrick;
  float: left;
  transition: width 250ms ease;
}

.sidebar.open {
  width: 260px;
}

.sidebar.half-open {
  width: 120px;
}

.sidebar.closed {
  width: 60px;
}

.blocks, .settings {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  float: left;
  width: 60px;
  height: 50vh;
  padding-top: 50vh;
  transition: width 250ms ease;
  overflow: hidden;
}

.blocks {
  background-color: lightblue;
  z-index: 10;
}

.settings {
  background-color: yellow;
  z-index: 5;
  left: 60px;
}

.blocks.closed, .settings.closed {
  width: 60px;
}

.blocks.open {
  width: 260px;
}

.settings.open {
  width: 200px;
}

.settings.hidden {
  width: 0px;
}

.content {
  position: relative;
  background-color: grey;
  float: left;
  transition: width 250ms ease;
}

.content.wide {
  width: calc(100% - 60px);
}

.content.narrow {
  width: calc(100% - 260px);
}

.content.narrow-wide {
  width: calc(100% - 120px);
}

.editor,.preview {
  width: 50%;
  float: left;
  height: 99vh;
  text-align: center;
  padding-top: 1vh;
}

.editor {
  background-color: teal;
}

.preview {
  background-color: red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var $sidebar;
var $blocks;
var $settings;
var $content;

$(document).ready(function() {
  $sidebar = $('.sidebar');
  $blocks = $('.blocks');
  $settings = $('.settings');
  $content = $('.content');

  $('#open_blocks').on('click', function() {
    openBlocks();
    closeSettings();
    narrowContent();
  })
  $('#open_settings').on('click', function() {
    showSettings();
    openSettings();
    closeBlocks();
    narrowContent();
  })
  $('#close_both').on('click', function() {
    closeSettings();
    closeBlocks();
    closeSidebar();
    hideSettings();
    wideContent();
  })
  $('#minimize_settings').on('click', () => {
    closeSettings();
    narrowWideContent();
    halfOpenSidebar();
  })
  $('#hide_settings').on('click', () => {
    hideSettings();
  })
  $('#show_settings').on('click', () => {
    showSettings();
  })
});

function narrowWideContent() {
  $content.removeClass('narrow')
  $content.removeClass('wide')
  $content.addClass('narrow-wide')
}

function narrowContent() {
  $content.addClass('narrow');
  $content.removeClass('wide');
  $content.removeClass('narrow-wide');
}

function wideContent() {
  $content.addClass('wide');
  $content.removeClass('narrow');
  $content.removeClass('narrow-wide');
}

function openSidebar() {
  $sidebar.addClass('open');
  $sidebar.removeClass('closed');
  $sidebar.removeClass('half-open');
}

function closeSidebar() {
  $sidebar.addClass('closed');
  $sidebar.removeClass('open');
  $sidebar.removeClass('half-open');
}

function halfOpenSidebar() {
  $sidebar.removeClass('open');
  $sidebar.removeClass('close');
  $sidebar.addClass('half-open');
}

function openBlocks() {
  openSidebar();
  $blocks.addClass('open');
  $blocks.removeClass('closed');
}

function closeBlocks() {
  $blocks.addClass('closed');
  $blocks.removeClass('open');
}

function openSettings() {
  openSidebar();
  $settings.addClass('open');
  $settings.removeClass('closed');
}

function closeSettings() {
  $settings.addClass('closed');
  $settings.removeClass('open');
}

function hideSettings() {
  $settings.addClass('hidden');
}

function showSettings() {
  $settings.removeClass('hidden');
}</script></body>
</html>

## jsbin.vogubu.css
body, html {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  background-color: lightgrey;
  width: 100%;
  height: 100vh;
}

.sidebar {
  height: 100vh;
  position: relative;
  background-color: firebrick;
  float: left;
  transition: width 250ms ease;
}

.sidebar.open {
  width: 260px;
}

.sidebar.half-open {
  width: 120px;
}

.sidebar.closed {
  width: 60px;
}

.blocks, .settings {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: lightblue;
  float: left;
  width: 60px;
  height: 50vh;
  padding-top: 50vh;
  transition: width 250ms ease;
  overflow: hidden;
}

.blocks {
  background-color: lightblue;
  z-index: 10;
}

.settings {
  background-color: yellow;
  z-index: 5;
  left: 60px;
}

.blocks.closed, .settings.closed {
  width: 60px;
}

.blocks.open {
  width: 260px;
}

.settings.open {
  width: 200px;
}

.settings.hidden {
  width: 0px;
}

.content {
  position: relative;
  background-color: grey;
  float: left;
  transition: width 250ms ease;
}

.content.wide {
  width: calc(100% - 60px);
}

.content.narrow {
  width: calc(100% - 260px);
}

.content.narrow-wide {
  width: calc(100% - 120px);
}

.editor,.preview {
  width: 50%;
  float: left;
  height: 99vh;
  text-align: center;
  padding-top: 1vh;
}

.editor {
  background-color: teal;
}

.preview {
  background-color: red;
}

## jsbin.vogubu.js
'use strict';

var $sidebar;
var $blocks;
var $settings;
var $content;

$(document).ready(function () {
  $sidebar = $('.sidebar');
  $blocks = $('.blocks');
  $settings = $('.settings');
  $content = $('.content');

  $('#open_blocks').on('click', function () {
    openBlocks();
    closeSettings();
    narrowContent();
  });
  $('#open_settings').on('click', function () {
    showSettings();
    openSettings();
    closeBlocks();
    narrowContent();
  });
  $('#close_both').on('click', function () {
    closeSettings();
    closeBlocks();
    closeSidebar();
    hideSettings();
    wideContent();
  });
  $('#minimize_settings').on('click', function () {
    closeSettings();
    narrowWideContent();
    halfOpenSidebar();
  });
  $('#hide_settings').on('click', function () {
    hideSettings();
  });
  $('#show_settings').on('click', function () {
    showSettings();
  });
});

function narrowWideContent() {
  $content.removeClass('narrow');
  $content.removeClass('wide');
  $content.addClass('narrow-wide');
}

function narrowContent() {
  $content.addClass('narrow');
  $content.removeClass('wide');
  $content.removeClass('narrow-wide');
}

function wideContent() {
  $content.addClass('wide');
  $content.removeClass('narrow');
  $content.removeClass('narrow-wide');
}

function openSidebar() {
  $sidebar.addClass('open');
  $sidebar.removeClass('closed');
  $sidebar.removeClass('half-open');
}

function closeSidebar() {
  $sidebar.addClass('closed');
  $sidebar.removeClass('open');
  $sidebar.removeClass('half-open');
}

function halfOpenSidebar() {
  $sidebar.removeClass('open');
  $sidebar.removeClass('close');
  $sidebar.addClass('half-open');
}

function openBlocks() {
  openSidebar();
  $blocks.addClass('open');
  $blocks.removeClass('closed');
}

function closeBlocks() {
  $blocks.addClass('closed');
  $blocks.removeClass('open');
}

function openSettings() {
  openSidebar();
  $settings.addClass('open');
  $settings.removeClass('closed');
}

function closeSettings() {
  $settings.addClass('closed');
  $settings.removeClass('open');
}

function hideSettings() {
  $settings.addClass('hidden');
}

function showSettings() {
  $settings.removeClass('hidden');
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	<style id="jsbin-css">
	body, html {
	margin: 0;
	padding: 0;
	}

	.wrapper {
	position: relative;
	background-color: lightgrey;
	width: 100%;
	height: 100vh;
	}

	.sidebar {
	height: 100vh;
	position: relative;
	background-color: firebrick;
	float: left;
	transition: width 250ms ease;
	}

	.sidebar.open {
	width: 260px;
	}

	.sidebar.half-open {
	width: 120px;
	}

	.sidebar.closed {
	width: 60px;
	}

	.blocks, .settings {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: lightblue;
	float: left;
	width: 60px;
	height: 50vh;
	padding-top: 50vh;
	transition: width 250ms ease;
	overflow: hidden;
	}

	.blocks {
	background-color: lightblue;
	z-index: 10;
	}

	.settings {
	background-color: yellow;
	z-index: 5;
	left: 60px;
	}

	.blocks.closed, .settings.closed {
	width: 60px;
	}

	.blocks.open {
	width: 260px;
	}

	.settings.open {
	width: 200px;
	}

	.settings.hidden {
	width: 0px;
	}

	.content {
	position: relative;
	background-color: grey;
	float: left;
	transition: width 250ms ease;
	}

	.content.wide {
	width: calc(100% - 60px);
	}

	.content.narrow {
	width: calc(100% - 260px);
	}

	.content.narrow-wide {
	width: calc(100% - 120px);
	}

	.editor,.preview {
	width: 50%;
	float: left;
	height: 99vh;
	text-align: center;
	padding-top: 1vh;
	}

	.editor {
	background-color: teal;
	}

	.preview {
	background-color: red;
	}
	</style>
	</head>
	<body>
	<div>
	<div class="wrapper">
	<div class="sidebar open">
	<div class="blocks open">Blocks</div>
	<div class="settings closed">Settings</div>
	</div>
	<div class="content narrow">
	<div class="editor">
	<div>
	<p>Bacon ipsum dolor amet chuck swine prosciutto bacon, porchetta doner pork chop boudin filet mignon cupim leberkas meatloaf beef drumstick chicken. Ground round venison pancetta, pig meatloaf alcatra beef ribs jerky chuck jowl corned beef tongue kielbasa. Meatball jerky short ribs, ball tip flank pork belly sausage beef ribs salami spare ribs beef doner pastrami. Turkey corned beef filet mignon flank shankle. Frankfurter porchetta boudin, pork chop tri-tip filet mignon salami tenderloin strip steak shankle capicola ribeye ham hock pork. Tongue fatback salami pork loin prosciutto.</p>

	<p>Pig chuck pork, strip steak sirloin t-bone doner corned beef kielbasa cow pastrami brisket turducken flank. Ground round kielbasa bacon cupim, hamburger alcatra beef tongue shankle chuck turkey ribeye. Drumstick swine meatball pancetta sirloin venison. Shankle tenderloin short ribs hamburger doner corned beef frankfurter pork belly ball tip pastrami jowl. Hamburger fatback turducken, pastrami beef ribs corned beef ham hock tri-tip alcatra andouille. Flank sausage strip steak, capicola pastrami bacon hamburger jowl pork belly alcatra.</p>

	<p>Meatloaf jowl alcatra meatball boudin t-bone salami landjaeger. Hamburger pork belly cow corned beef rump. Sirloin shoulder ribeye chuck, porchetta sausage turducken beef kevin strip steak fatback flank frankfurter pastrami salami. Capicola corned beef sausage shoulder turducken short ribs kevin jowl short loin pork belly kielbasa bresaola.</p>

	<p>Drumstick tenderloin shoulder turducken, sirloin kevin flank turkey kielbasa capicola pancetta ground round pig tail boudin. Pastrami porchetta shoulder strip steak beef ribs shankle cupim bresaola jowl sirloin bacon spare ribs pork loin tri-tip. Pancetta brisket leberkas, rump tail andouille salami chicken ground round drumstick capicola short ribs meatball meatloaf biltong. Ribeye tri-tip pork loin ham hock leberkas hamburger bacon jerky. Porchetta pork loin corned beef sirloin rump salami. Ribeye shankle pig, kielbasa ham pork chop doner frankfurter chicken pork belly hamburger pork jowl tri-tip bacon. Landjaeger kevin shank, boudin bacon biltong short loin strip steak ground round cupim alcatra ribeye beef ribs pork belly prosciutto.</p>

	<p>Ribeye shank alcatra ham hock leberkas shoulder pork t-bone kevin salami hamburger pastrami. Swine pig pork loin tongue pastrami porchetta cow biltong fatback pancetta bresaola cupim. Pork pork belly jowl corned beef shank, filet mignon chuck sausage landjaeger. Shankle frankfurter chuck, turducken beef jowl boudin filet mignon rump. Turducken jerky t-bone porchetta, prosciutto salami ribeye landjaeger beef picanha strip steak capicola pig. Ball tip kielbasa shank rump. Kevin capicola beef cow.</p>
	</div>
	</div>
	<div class="preview">
	<div>Preview</div>
	<button id="open_blocks">Open Blocks</button><br/>
	<button id="open_settings">Open Settings</button><br/>
	<button id="close_both">Close Both</button><br/>
	<button id="minimize_settings">Minimize Settings</button><br/>
	<button id="hide_settings">Hide Settings</button><br/>
	<button id="show_settings">Show Settings</button><br/>
	</div>
	</div>
	</div>
	</div>
	<script id="jsbin-javascript">
	'use strict';

	var $sidebar;
	var $blocks;
	var $settings;
	var $content;

	$(document).ready(function () {
	$sidebar = $('.sidebar');
	$blocks = $('.blocks');
	$settings = $('.settings');
	$content = $('.content');

	$('#open_blocks').on('click', function () {
	openBlocks();
	closeSettings();
	narrowContent();
	});
	$('#open_settings').on('click', function () {
	showSettings();
	openSettings();
	closeBlocks();
	narrowContent();
	});
	$('#close_both').on('click', function () {
	closeSettings();
	closeBlocks();
	closeSidebar();
	hideSettings();
	wideContent();
	});
	$('#minimize_settings').on('click', function () {
	closeSettings();
	narrowWideContent();
	halfOpenSidebar();
	});
	$('#hide_settings').on('click', function () {
	hideSettings();
	});
	$('#show_settings').on('click', function () {
	showSettings();
	});
	});

	function narrowWideContent() {
	$content.removeClass('narrow');
	$content.removeClass('wide');
	$content.addClass('narrow-wide');
	}

	function narrowContent() {
	$content.addClass('narrow');
	$content.removeClass('wide');
	$content.removeClass('narrow-wide');
	}

	function wideContent() {
	$content.addClass('wide');
	$content.removeClass('narrow');
	$content.removeClass('narrow-wide');
	}

	function openSidebar() {
	$sidebar.addClass('open');
	$sidebar.removeClass('closed');
	$sidebar.removeClass('half-open');
	}

	function closeSidebar() {
	$sidebar.addClass('closed');
	$sidebar.removeClass('open');
	$sidebar.removeClass('half-open');
	}

	function halfOpenSidebar() {
	$sidebar.removeClass('open');
	$sidebar.removeClass('close');
	$sidebar.addClass('half-open');
	}

	function openBlocks() {
	openSidebar();
	$blocks.addClass('open');
	$blocks.removeClass('closed');
	}

	function closeBlocks() {
	$blocks.addClass('closed');
	$blocks.removeClass('open');
	}

	function openSettings() {
	openSidebar();
	$settings.addClass('open');
	$settings.removeClass('closed');
	}

	function closeSettings() {
	$settings.addClass('closed');
	$settings.removeClass('open');
	}

	function hideSettings() {
	$settings.addClass('hidden');
	}

	function showSettings() {
	$settings.removeClass('hidden');
	}
	</script>


	<script id="jsbin-source-css" type="text/css">body, html {
	margin: 0;
	padding: 0;
	}

	.wrapper {
	position: relative;
	background-color: lightgrey;
	width: 100%;
	height: 100vh;
	}

	.sidebar {
	height: 100vh;
	position: relative;
	background-color: firebrick;
	float: left;
	transition: width 250ms ease;
	}

	.sidebar.open {
	width: 260px;
	}

	.sidebar.half-open {
	width: 120px;
	}

	.sidebar.closed {
	width: 60px;
	}

	.blocks, .settings {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: lightblue;
	float: left;
	width: 60px;
	height: 50vh;
	padding-top: 50vh;
	transition: width 250ms ease;
	overflow: hidden;
	}

	.blocks {
	background-color: lightblue;
	z-index: 10;
	}

	.settings {
	background-color: yellow;
	z-index: 5;
	left: 60px;
	}

	.blocks.closed, .settings.closed {
	width: 60px;
	}

	.blocks.open {
	width: 260px;
	}

	.settings.open {
	width: 200px;
	}

	.settings.hidden {
	width: 0px;
	}

	.content {
	position: relative;
	background-color: grey;
	float: left;
	transition: width 250ms ease;
	}

	.content.wide {
	width: calc(100% - 60px);
	}

	.content.narrow {
	width: calc(100% - 260px);
	}

	.content.narrow-wide {
	width: calc(100% - 120px);
	}

	.editor,.preview {
	width: 50%;
	float: left;
	height: 99vh;
	text-align: center;
	padding-top: 1vh;
	}

	.editor {
	background-color: teal;
	}

	.preview {
	background-color: red;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var $sidebar;
	var $blocks;
	var $settings;
	var $content;

	$(document).ready(function() {
	$sidebar = $('.sidebar');
	$blocks = $('.blocks');
	$settings = $('.settings');
	$content = $('.content');

	$('#open_blocks').on('click', function() {
	openBlocks();
	closeSettings();
	narrowContent();
	})
	$('#open_settings').on('click', function() {
	showSettings();
	openSettings();
	closeBlocks();
	narrowContent();
	})
	$('#close_both').on('click', function() {
	closeSettings();
	closeBlocks();
	closeSidebar();
	hideSettings();
	wideContent();
	})
	$('#minimize_settings').on('click', () => {
	closeSettings();
	narrowWideContent();
	halfOpenSidebar();
	})
	$('#hide_settings').on('click', () => {
	hideSettings();
	})
	$('#show_settings').on('click', () => {
	showSettings();
	})
	});

	function narrowWideContent() {
	$content.removeClass('narrow')
	$content.removeClass('wide')
	$content.addClass('narrow-wide')
	}

	function narrowContent() {
	$content.addClass('narrow');
	$content.removeClass('wide');
	$content.removeClass('narrow-wide');
	}

	function wideContent() {
	$content.addClass('wide');
	$content.removeClass('narrow');
	$content.removeClass('narrow-wide');
	}

	function openSidebar() {
	$sidebar.addClass('open');
	$sidebar.removeClass('closed');
	$sidebar.removeClass('half-open');
	}

	function closeSidebar() {
	$sidebar.addClass('closed');
	$sidebar.removeClass('open');
	$sidebar.removeClass('half-open');
	}

	function halfOpenSidebar() {
	$sidebar.removeClass('open');
	$sidebar.removeClass('close');
	$sidebar.addClass('half-open');
	}

	function openBlocks() {
	openSidebar();
	$blocks.addClass('open');
	$blocks.removeClass('closed');
	}

	function closeBlocks() {
	$blocks.addClass('closed');
	$blocks.removeClass('open');
	}

	function openSettings() {
	openSidebar();
	$settings.addClass('open');
	$settings.removeClass('closed');
	}

	function closeSettings() {
	$settings.addClass('closed');
	$settings.removeClass('open');
	}

	function hideSettings() {
	$settings.addClass('hidden');
	}

	function showSettings() {
	$settings.removeClass('hidden');
	}</script></body>
	</html>