Demo of Controlgroup destroy method in JQuery UI

HTML

<div class="my_controlgroup">
      <select>
        <option>PHP</option>
        <option>MySQL</option>
        <option>JavaScript</option>
        <option>JQuery</option>
        <option>HTML</option>
        <option>ASP</option>
        <option>PhotoShop</option>
      </select>
      <label for="radio1">Tutorial</label>
      <input type="radio" name="type" id="radio1">
      <label for="radio2">Demo</label>
      <input type="radio" name="type" id="radio2">
      <label for="help">Help</label>
      <input type="checkbox" name="help" id="help">
      <label for="spinner" class="ui-controlgroup-label"># of Pages</label>
      <input id="spinner" class="ui-spinner-input">
      <button id="download">Download</button>
    </div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( function() {
    $( ".my_controlgroup" ).controlgroup()
    $( ".my_controlgroup" ).controlgroup({
      "direction": "horizontal"
    });
  } );
////////////////
////////
$("input:radio[name=r1]").click(function() {
var sel = $(this).val();
if(sel=='destroy'){
$( ".my_controlgroup" ).controlgroup( "destroy");
$('#d1').html("\$( \".my_controlgroup\" ).controlgroup( " + sel +")");
}

if(sel=='enable'){
	$(".my_controlgroup").trigger('create');
	//$( ".my_controlgroup" ).on( "controlgroupcreate", function( event, ui ) {} );
	//$( ".my_controlgroup" ).controlgroup( "instance");
	//$( ".my_controlgroup" ).controlgroup( "refresh");
//$('#d1').html( " \$( \".my_controlgroup\" ).controlgroup( \"option\", \"disabled\", " + sel +")");
location.reload();
}
})
////////////////
//////////////////////////
$( function() {
    $( ".my_selection" ).controlgroup()
    $( ".my_selection" ).controlgroup({
      "direction": "horizontal"
    });
  } );
////////////////
})
</script>