Skip to content

Instantly share code, notes, and snippets.

@ryndel

ryndel/demo.html

Created Jul 17, 2012
Embed
What would you like to do?
jquery collapse

jquery.collapse

<!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 );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.