User:Anita Nguyen

From OpenWetWare

(Difference between revisions)
Jump to: navigation, search
Line 15: Line 15:
<html>
<html>
<head>
<head>
 +
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">  
<script type="text/javascript">  
$(document).ready(function(){
$(document).ready(function(){
-
  $("button").click(function(){
+
$(".flip").click(function(){
-
     $("div").animate({height:300},"slow");
+
     $(".panel").slideToggle("slow");
-
    $("div").animate({width:300},"slow");
+
-
    $("div").animate({height:100},"slow");
+
-
    $("div").animate({width:100},"slow");
+
   });
   });
});
});
-
</script>  
+
</script>
 +
 +
<style type="text/css">
 +
div.panel,p.flip
 +
{
 +
margin:0px;
 +
padding:5px;
 +
text-align:center;
 +
background:#e5eecc;
 +
border:solid 1px #c3c3c3;
 +
}
 +
div.panel
 +
{
 +
height:120px;
 +
display:none;
 +
}
 +
</style>
</head>
</head>
   
   
<body>
<body>
-
<button>Start Animation</button>
+
-
<br /><br />
+
<div class="panel">
-
<div style="background:#98bf21;height:100px;width:100px;position:relative">
+
<p>Because time is valuable, we deliver quick and easy learning.</p>
 +
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>
</div>
 +
 +
<p class="flip">Show/Hide Panel</p>
 +
</body>
</body>
</html>
</html>

Revision as of 11:20, 7 September 2010

Contact Info

Education

Useful links

Because time is valuable, we deliver quick and easy learning.

At W3Schools, you can study everything you need to learn, in an accessible and handy format.

Show/Hide Panel

Personal tools