Following is an example code test harness which emulates the problem I am experiencing. Basically, when not using resizable() for the textarea, clicking on the "Content [+/-]" allows the fieldset to collapse and no textarea is shown. However, when using resizable, clicking on "Content [+/-]" causes the text area to be hidden, but the original dimensions of the textarea are retained and the the fieldset does not collapse, and the resize icon is still shown at the lower right corner.
Is there a better way to structure the HTML or am I missing an operation with jQuery/jQueryUI?
Thank you.
<!DOCTYPE html>
<html>
<head><title>SO,2</title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js">
</script>
<link
rel="stylesheet"
type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css"/>
</head>
<body>
<div id="squish1">
<fieldset id="fs1">
<legend id="lg1">Content [+/-]</legend>
<textarea rows="10" cols="80" name="ta1" id="ta1"></textarea>
</fieldset>
</div>
<script type="text/javascript">
$('#ta1').resizable();
$('#fs1').click(function(){
$('#ta1').toggle();
});
</script>
</body>
</html>