Jquery UI Panel Toggle

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <button id="switch">Toggle</button>
    <br />
    <div id="panel" style="">This is a demonstration</div>
  </body>

</html>

$(document).ready(function(){
 
  $("#switch")
  .button()
  .click(function(){
   
      $("#panel").toggle("slide");
  });
});

body{
  background-color:black;
}

#panel{
  
  border: 1px solid dashed #FFF;
  height:400px;
  width:400px;
  background-image:url('http://farm4.static.flickr.com/3550/3367798587_c24c797f0f.jpg');color:white;font-weight:bold;
  
  -webkit-border-top-right-radius: 9px;
  -webkit-border-bottom-right-radius: 9px;
  -moz-border-radius-topright: 9px;
  -moz-border-radius-bottomright: 9px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  
}