Jquery UI panel resizing on click

Question

Hi,

I am using Jquery Ui panels.([http://code.google.com/p/ist-ui-panel/][1])

While loading the application, everything is fine like collasible, draggable etc.

But i want to make the panel collapsible while clicking on some links.fo ex:

This code will run when the form is loading....

$('#myNews').panel({
    'collapsible' :true,
    'stackable':false,
 });

The html

<div  class="panel" id="myNews" >
<h3>Poll</h3>
<div>Some content</div>
</div>

I want to make 'collapsible' :false when clicking some link.... like this

$('#click1').click(function() {
   $('#myNews').panel({
      'collapseType':'slide-right',
      'collapsible':false,
    });
});

the code is running without any error, but the '#myNews' not getting affected when clicking the '#click1' link.

Need some help pls.

Thanks in advance

Answer 1

If you read the uncompressed source code for that widget, it appears that what you are doing is only meant to be used to create panels, not to modify them afterward.

The underlying software is either buggy or I don't understand it. So you'll have to hunt down some bugs, but you can use the 'destroy' method on that widget to reset the div completely, and then make it a panel again, like so:

$('#myNews').panel("destroy");
$('#myNews').panel(...

As I said, it's buggy or I don't quite get it - there's an error raised by the destroy call which you have to catch, and subsequent calls to make new panels do make panels, but they aren't completely correct.

Answer 2

Hi, Ra

I'm the one behind ist-ui-panel.
Jesse was right — by now the only way for you is to use 'destroy' method somewhat like:

$(document).ready(function(){
    $('#click1').bind({
        'click': function() {
            $('#myNews').panel('destroy');
            $('#myNews').panel({
                'collapsible' :true,
                'collapseType':'slide-right',
                'stackable':true
            });
        }
    });


    $('#click2').bind({
        'click': function() {
            $('#myNews').panel('destroy');
            $('#myNews').panel({'collapsible': false});
        }
    });
});

Notice, you should explicitly destroy previous panel before making a new one.

You may grab latest (0.6) source at http://github.com/idlesign/ist-ui-panel/downloads and test whether it is still 'buggy' :)