ryndel/demo.html

## readme.md

      
    Raw
  

              readme.md
            
          
    jquery.collapse


## demo.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Collapse</title>
<link rel="stylesheet" href="jquery.collapse.css">
<style>
* {
	margin: 0;
	padding: 0;
}

body, html {
	height:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	overflow:hidden;
}


</style>


</head>

<body>
<div id="main">
  <!-- start sidebar -->
  <section class="sidebar fl">
    <!-- mod -->
    <article>
      <h2>Module 1</h2>
    </article>

    <!-- mod -->
    <article>
      <h2>Module 2</h2>
    </article>

    <!-- mod -->
    <article>
      <h2>Module 3</h2>
    </article>
  </section>
  <!-- end sidebar -->

  <!-- start main-content -->
  <section id="main-content"></section>
  <!-- end main-content -->

  <!-- start sidebar -->
  <section class="sidebar fr">
  	<!-- mod -->
    <article>
      <h2>Module 1</h2>
      <p>Lorem ipsum dolor sit amet</p>
    </article>

    <!-- mod -->
    <ul>
      <li>
        <h2>Module 2</h2>
        <p>I'm in a list</p>
      </li>
    </ul>

    <!-- mod -->
    <div>
      <h2>Module 3</h2>
      <p>I'm a div</p>
      <div style="background-color:#f00">I'm a div inside</div>
    </div>
  </section>
  <!-- end sidebar -->
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.collapse.js"></script>
<script type="text/javascript">

$(document).ready(function() {
	$(".sidebar").collapse();
});

</script>
</body>
</html>

## jquery.collapse.css
#main {
	width:100%;
	height:100%;
	padding-bottom:20px;
	background-color:#f1f1f1;
	overflow-y: scroll;
}

.sidebar {
	position:relative;
	width:20%;
	height:100%;
}

.sidebar article {
	padding:15px;
}

.sidebar > * {
	padding:15px;
}

.sidebar ul {
	list-style:none;
}

#main-content {
	float:left;
	width:60%;
	background-color:#999;
	height:100%;
}

.sidebar-control {
	height:100%;
	width:9px;
	position:absolute;
	padding:0;
}

.sidebar-control.left  {
}

.sidebar-control.right  {
	left:0;
}

.sidebar-control {
	position:absolute;
	right:0;
}

.sidebar-control:hover {
	background:#999;
}

.sidebar-control a {
	position:relative;
	margin:5px auto;
	display:block;
}

.arrow-right-5 {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #ccc;
}

.arrow-left-5 {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid #ccc;
}

.fl { float:left }
.fr { float:right }

## jquery.collapse.js
(function( $ ) {
  $.fn.collapse = function(options) {

	var settings = $.extend( {
		'mainContent' : '#main-content',
		'sideContent' : '.sidebar',
		'controllerWidth' : 10,
	}, options);

	return this.each(function() {

		var $this = $(this);
		// find out if it's floated left or right - assign this to a variable
		var screenPos = $this.css("float");

		// create the module container controls
		$this.prepend('<div class="sidebar-control '  + screenPos + '"><a class="arrow-' + screenPos + '-5"></a></div>');

		$this.find(".sidebar-control").click().toggle(
			function(){
				// change the direction of the arrow

				var myCont = $(this).find("a");
				if (myCont.hasClass("arrow-left-5")) {
					myCont.removeClass("arrow-left-5").addClass("arrow-right-5");
				} else {
					myCont.removeClass("arrow-right-5").addClass("arrow-left-5");
				}

				// hide the module container
				var offset = -1* parseInt($(this).parents(".sidebar").width()) + settings.controllerWidth;
				oldAssetWidth = $(settings.mainContent).width();

				var newAssetWidth = $(settings.mainContent).width() - offset;

				if (screenPos == "left") {
					$(this).parents(".sidebar").animate({ marginLeft: offset }, 300);

				} else {
					$(this).parents(".sidebar").animate({ marginRight: offset }, 300);
				}

				$(settings.mainContent).animate({width: newAssetWidth}, 300, function() {
    				$(settings.mainContent).css("overflow", "scroll");
  				});

			},
			function(){
				// change the direction of the arrow
				var myCont = $(this).find("a");
				if (myCont.hasClass("arrow-left-5")) {
					myCont.removeClass("arrow-left-5").addClass("arrow-right-5");
				} else {
					myCont.removeClass("arrow-right-5").addClass("arrow-left-5");
				}

				if (screenPos == "left") {
				$(this).parents(".sidebar").animate({ marginLeft: 0 }, 300, function() {
    				$(settings.mainContent).css("overflow", "scroll");
  				});
				} else {
				$(this).parents(".sidebar").animate({ marginRight: 0 }, 300, function() {
    				$(settings.mainContent).css("overflow", "scroll");
  				});

				}
				var w1 = $(this).parents(".sidebar").width();
				var w2 = $(settings.mainContent).width();
				var newW = w2 - w1 + settings.controllerWidth;

				$(settings.mainContent).animate({width: newW}, 300);
			});
    });

  };
})( jQuery );
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>jQuery Collapse</title>
	<link rel="stylesheet" href="jquery.collapse.css">
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	body, html {
	height:100%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	overflow:hidden;
	}


	</style>


	</head>

	<body>
	<div id="main">
	<!-- start sidebar -->
	<section class="sidebar fl">
	<!-- mod -->
	<article>
	<h2>Module 1</h2>
	</article>

	<!-- mod -->
	<article>
	<h2>Module 2</h2>
	</article>

	<!-- mod -->
	<article>
	<h2>Module 3</h2>
	</article>
	</section>
	<!-- end sidebar -->

	<!-- start main-content -->
	<section id="main-content"></section>
	<!-- end main-content -->

	<!-- start sidebar -->
	<section class="sidebar fr">
	<!-- mod -->
	<article>
	<h2>Module 1</h2>
	<p>Lorem ipsum dolor sit amet</p>
	</article>

	<!-- mod -->
	<ul>
	<li>
	<h2>Module 2</h2>
	<p>I'm in a list</p>
	</li>
	</ul>

	<!-- mod -->
	<div>
	<h2>Module 3</h2>
	<p>I'm a div</p>
	<div style="background-color:#f00">I'm a div inside</div>
	</div>
	</section>
	<!-- end sidebar -->
	</div>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.collapse.js"></script>
	<script type="text/javascript">

	$(document).ready(function() {
	$(".sidebar").collapse();
	});

	</script>
	</body>
	</html>
	#main {
	width:100%;
	height:100%;
	padding-bottom:20px;
	background-color:#f1f1f1;
	overflow-y: scroll;
	}

	.sidebar {
	position:relative;
	width:20%;
	height:100%;
	}

	.sidebar article {
	padding:15px;
	}

	.sidebar > * {
	padding:15px;
	}

	.sidebar ul {
	list-style:none;
	}

	#main-content {
	float:left;
	width:60%;
	background-color:#999;
	height:100%;
	}

	.sidebar-control {
	height:100%;
	width:9px;
	position:absolute;
	padding:0;
	}

	.sidebar-control.left {
	}

	.sidebar-control.right {
	left:0;
	}

	.sidebar-control {
	position:absolute;
	right:0;
	}

	.sidebar-control:hover {
	background:#999;
	}

	.sidebar-control a {
	position:relative;
	margin:5px auto;
	display:block;
	}

	.arrow-right-5 {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid #ccc;
	}

	.arrow-left-5 {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 5px solid #ccc;
	}

	.fl { float:left }
	.fr { float:right }
	(function( $ ) {
	$.fn.collapse = function(options) {

	var settings = $.extend( {
	'mainContent' : '#main-content',
	'sideContent' : '.sidebar',
	'controllerWidth' : 10,
	}, options);

	return this.each(function() {

	var $this = $(this);
	// find out if it's floated left or right - assign this to a variable
	var screenPos = $this.css("float");

	// create the module container controls
	$this.prepend('<div class="sidebar-control ' + screenPos + '"><a class="arrow-' + screenPos + '-5"></a></div>');

	$this.find(".sidebar-control").click().toggle(
	function(){
	// change the direction of the arrow

	var myCont = $(this).find("a");
	if (myCont.hasClass("arrow-left-5")) {
	myCont.removeClass("arrow-left-5").addClass("arrow-right-5");
	} else {
	myCont.removeClass("arrow-right-5").addClass("arrow-left-5");
	}

	// hide the module container
	var offset = -1* parseInt($(this).parents(".sidebar").width()) + settings.controllerWidth;
	oldAssetWidth = $(settings.mainContent).width();

	var newAssetWidth = $(settings.mainContent).width() - offset;

	if (screenPos == "left") {
	$(this).parents(".sidebar").animate({ marginLeft: offset }, 300);

	} else {
	$(this).parents(".sidebar").animate({ marginRight: offset }, 300);
	}

	$(settings.mainContent).animate({width: newAssetWidth}, 300, function() {
	$(settings.mainContent).css("overflow", "scroll");
	});

	},
	function(){
	// change the direction of the arrow
	var myCont = $(this).find("a");
	if (myCont.hasClass("arrow-left-5")) {
	myCont.removeClass("arrow-left-5").addClass("arrow-right-5");
	} else {
	myCont.removeClass("arrow-right-5").addClass("arrow-left-5");
	}

	if (screenPos == "left") {
	$(this).parents(".sidebar").animate({ marginLeft: 0 }, 300, function() {
	$(settings.mainContent).css("overflow", "scroll");
	});
	} else {
	$(this).parents(".sidebar").animate({ marginRight: 0 }, 300, function() {
	$(settings.mainContent).css("overflow", "scroll");
	});

	}
	var w1 = $(this).parents(".sidebar").width();
	var w2 = $(settings.mainContent).width();
	var newW = w2 - w1 + settings.controllerWidth;

	$(settings.mainContent).animate({width: newW}, 300);
	});
	});

	};
	})( jQuery );