Toggle explode

by kompiajaib

HTML

<a href="#" class="button1" id="run">Click Me</a>
<div class="toggler"> 
  <div id="box"> 
    <h3>Toggle</h3> 
    <p> 
      Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. 
    </p> 
  </div> 
</div>

CSS

.button1 {
    width: 217px;
	font-size:16px;
	font-family:Arial;
	font-weight:normal;
	border:1px solid #3866a3;
	padding:9px 18px;
	text-decoration:none;
	background-color:#63b8ee;
	color:#ffffff;
	display:inline-block;
	text-shadow:1px 1px 0px #7cacde;
 	box-shadow:inset 1px 1px 0px 0px #bee2f9;
}
.button1:hover {
	background-color:#468ccf;
}

.toggler { 
    width: 500px; 
    height: 200px;
  } 
  #box { 
    position: relative; 
    width: 240px; 
    height: 135px; 
    padding: 0.4em; 
    background-color:#efefef;
    border:1px solid #ccc;
  } 
  #box h3 { 
    margin: 0; 
    padding: 0.4em; 
    text-align: center; 
    border:1px solid #ccc;
    background:#ddd;
  }

JavaScript

$(function() {  
    $("#run").click(function () { 
    $("#box").toggle("explode") 
}); 
 });