<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>The third jQuery example</title>
    <link type="text/css" rel="stylesheet" href="lib/ch2_3.css" />
    <script type="text/javascript" src="lib/jquery-1.5.min.js">
    </script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#toggle1").click(function(event){
          $('#b1').slideToggle('slow');
        });
        $("#toggle2").click(function(event){
          $('#b2').slideToggle('slow');
        });
        $("#toggle3").click(function(event){
          $('#h2').slideToggle('slow');
        });
      });
    </script>
  </head>
  <body>
    <h1 id="u1">Animated showing and hiding of an image and text with jQuery</h1>
    <button id="toggle1">
      Toggle Image 1
    </button>
    <button id="toggle2">
      Toggle Image 2
    </button>
    <button id="toggle3">
      Toggle Text
    </button>
    <hr/><img src="images/b1.jpg" id="b1" />
	<img src="images/b2.jpg" id="b2" /><hr/>
	<h2 id="h2">A ski jump</h2>
  </body>
</html>