It animates the height of the element, which causes the lower part of the element is sliding down.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:Pink; margin:5px; width:50px;
height:50px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me!
<div>Mahak</div>
<div>Garg</div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("fast");
} else {
$("div").hide();
}
});
</script>
</body>
</html>
Output: