jQuery slideToggle effect example

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery slideToggle() effect Example</title>
</head>
<body>
	<h1>jQuery slideToggle() effect Example</h1>
	<button type="button">Start</button>
	<div class="raw normal">
		<p>This is normal slideToggle effect</p>
	</div>
	<div class="raw slow">
		<p>This is slow slideToggle effect</p>
	</div>
	<div class="raw two000">
		<p>This is 2000 slideToggle effect</p>
	</div>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>

CSS

button {
	margin: 10px;
}
.raw {
	width: 400px;
	font-size: 22px;
	padding: 10px;
}
.normal {
	background-color: red;
}
.slow {
	background-color: blue;
	display: none;
}
.two000 {
	background-color: green;
}

Javascript

$('button').click(function(){
	$('.normal').slideToggle('slow');
	$('.slow').slideToggle(400);
	$('.two000').slideToggle(2000, function() {
		alert('slideToggle effect completed.');
	});
});