Accordion - Resize By Drag and Drop
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/smoothness/jquery-ui.css">
<div class="demo">
<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">
<div style="clear: both;">TEST FLOAT FIX?</div>
<div id="accordion">
<h3><a href="#1">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#2">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#3">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#4">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#5">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#6">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#7">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
<h3><a href="#">item</a></h3>
<div>
<p>details</p>
</div>
</div>
</div><!--end resizer-->
CSS
#accordion { overflow:scroll }
JavaScript
$(function() {
$( "#accordion" ).accordion({
fillSpace: true
}
);
});
$(function() {
$( "#accordionResizer" ).resizable({
minHeight: 140,
resize: function() {
$( "#accordion" ).accordion( "resize" );
}
});
});