The reason they are all appearing at once is because what you have done now is appended three separate click handlers to the same object that each show in a separate div. Now every time you click on "button", all three of those functions are going to run.
What you could do is collect all the divs you want to show in one object, and keep a count of the amount of divs you have already shown in.
var count = 0,
$allDivs = $('.div1, .div2, .div3');
$('.button').click( function() {
if( count < $allDivs.length - 1 ) {
$allDivs.eq( count ).show( 'slow' );
count++;
}
});
If you select all the divs at once, then you can use jQuery's eq()
method to pick them out one at a time.
Here is a working example on JS fiddle: http://jsfiddle.net/grammar/76arV/
Hope this helps!