Bugzappy's Blog

It’s a barebones plugin that acts purely as a browser-side widget controller, it does not come with canned HTML/CSS. You must pass the id’s of the <div> or other elements you want to control to the plugin.

The widget is just a box which starts with a limited height, and then can be expanded by the user by a specified increment, or collpased entirely.

Try a DEMO:

The CODE for the above example:

<div style="border: 1px solid #ff0000; width: 200px;">
<div id="demo_box" style="padding: 10px; overflow: hidden; width: 200px; max-height: 80px;">
<p>AAAAAAA$lt;/p>
<p>BBBBBBBB$lt;/p>
<p>CCCCCCC$lt;/p>
<p>DDDDDDD$lt;/p>
<p>EEEEEEEE$lt;/p>
<p>FFFFFFFF$lt;/p>
</div>
<div id="demo_expand"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: left;">+</div>
<div id="demo_collapse"
    style="color: #ff0000; cursor: pointer; width: 100px; height: 20px; float: left; text-align: right;">-</div>
</div>

<script type="text/javascript"><!--
document.write(unescape("%3Cscript src='http://www.bugzappy.com/js/jquery.js' type='text/javascript'%3E%3C/script%3E"));
document.write(unescape("%3Cscript src='http://www.bugzappy.com/wp-content/uploads/2009/04/jqueryexpandbox.js' type='text/javascript'%3E%3C/script%3E"));
// --></script>

<script type="text/javascript"><!--
var $j = jQuery.noConflict();
$j("#demo_box").expandBox('#demo_expand', '#demo_collapse', {shrunkHeight: 80, expandHeightInc: 40, expandText: 'expand', expandDelay: 100, shrinkText: 'collapse'});
// --></script>

DOWNLOAD: jquery.expandbox.js

A bit of documentation coming later.