Home/ Questions/Q 3223280
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T16:05:19+00:00

Following is an example code test harness which emulates the problem I am experiencing.

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    resizable() creates a wrapper around the element to be resized.
    If you hide the textarea, the size and display of that wrapper wouldn’t change, so it still takes it’s place

    Use 

    $('.ui-wrapper',this).toggle();

    instead of

     $('#ta1').toggle();

    It will hide the wrapper(and of course the textarea, because of it’s inside the wrapper)

    If you want to toggle only when the legend receives the click, change the click()-Function into that:

        $('#lg1').click(function(){
    $('.ui-wrapper',this.parentNode).toggle();
});
    • 0