User:Anita Nguyen

From OpenWetWare

(Difference between revisions)
Jump to: navigation, search
Line 12: Line 12:
*[[OpenWetWare:Welcome|Introductory tutorial]]
*[[OpenWetWare:Welcome|Introductory tutorial]]
*[[Help|OpenWetWare help pages]]
*[[Help|OpenWetWare help pages]]
 +
<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(){
-
     $(this).hide();
+
     $(".panel").slideToggle("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>Click me</button>
+
 +
<div class="panel">
 +
<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>
 +
 +
<p class="flip">Show/Hide Panel</p>
 +
</body>
</body>
</html>
</html>

Revision as of 12:23, 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