Demo of getting and setting alsoResize option

Present option is :

Change the Option for alsoResize To : 2nd 3rd

Main

2nd

3rd

Resize the Main element by dragging right or bottom borders to check how another element ( 2nd or 3rd ) is also changing. Then change the option by selecting one of the two radio buttons and see how the connected element also changes along with the Main element.

Check the code below to understand how the alsoResize option value is collected and how the value is set to other element.

Tutorial Resizable

Full Code

HTML

<div id="resize_id" class=resize_cl>Main </div>
</div><div class='col-md-4'>
<div id="resize_id2" class=resize_cl>2nd </div>
</div><div class='col-md-4'>
<div id="resize_id3" class=resize_cl>3rd</div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
	alsoResize: "#resize_id2"
});
/////////
$("input:radio[name=r1]").click(function() {
var r_sel=$(this).val()
 // setting the alsoResize option value //
if(r_sel=='2nd'){
  $( "#resize_id" ).resizable( "option","alsoResize","#resize_id2" );
}
if(r_sel=='3rd'){
  $( "#resize_id" ).resizable( "option","alsoResize","#resize_id3" );
}
 var sel = $( "#resize_id" ).resizable( "option", "alsoResize" );
$("#d1").html("Present option is :"+sel);
})
 /////////////////

var sel = $( "#resize_id" ).resizable( "option", "alsoResize" );
$("#d1").html("Present option is :"+sel);
/////////
})
</script>