Cascading toggles

Cascading toggles

I figured out the toggle thing, starting with two pictures showing, clicking on one to hide the next. Code below. However, I want to start with one picture and click that to show the second. And then I want to be able to click the second to show a third and so on, ending with a link after clicking the last picture. How do I do this?

  1.     <html>
  2.     <head>
  3.     <script type="text/javascript" src="jquery.js"></script>
  4.     <script type="text/javascript">
  5.     $(document).ready(function(){
  6.       $("button").click(function(){
  7.   
  8.     $("#test").toggle();
  9.       });
  10.     });
  11.     </script>
  12.     </head>
  13.     <body>
  14.    
  15.     <button><img src="http://i103.photobucket.com/albums/m121/Goth128/Emo.jpg"></button>
  16.     <img id="test" src="http://i141.photobucket.com/albums/r70/lizapizza_photos/henri_de_toulouse_lautrec.png">
  17.     <div class="marked">
  18.     <p>This is another small paragraph.</p>
  19.     <div>
  20.     </body>
  21.     </html>