Skip to content

Instantly share code, notes, and snippets.

@benfoxall

benfoxall/plugin.html

Created July 19, 2011 10:04
Show Gist options
  • Save benfoxall/1091887 to your computer and use it in GitHub Desktop.
Save benfoxall/1091887 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
plugin.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Ben Foxall">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!-- Date: 2011-07-18 -->
<style type="text/css" media="screen">
ul li{
height:150px;
border: 1px solid #999;
}
ol > li{
width:300px;
float:left;
}
</style>
<script type="text/javascript" charset="utf-8">
$.fn.cutHeight = function(height){
this.each(function(){
/* Assign the element to have a limited height,
and a link that will expand/collapse it */
var limited_element = $(this).height(height).css('overflow', 'hidden');
var link_element = $('<h1>');
limited_element.after(link_element);
/* Set the click events for the link */
link_element.toggle(function(){
// limit the element
$(this).text('More…');
limited_element.animate({height:height});
}, function(){
// show the element
$(this).text('Less…');
var targetHeight = limited_element.height('auto').height();
limited_element.height(height);
limited_element.animate({height:targetHeight});
}).click();// and fire (collapse)
});
};
$(function(){
$('div').cutHeight(200);
});
</script>
</head>
<body>
<ol>
<li>
<div id="limited">
<ul>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
</ul>
</div>
</li>
<li>
<div id="limited2">
<ul>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
</ul>
</div>
</li>
<li>
<div id="limited2">
<ul>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
<li>This is a test</li>
</ul>
</div>
</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment