<!DOCTYPE html> 
<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
<style type="text/css"> 
#p1, #f1 { 
	padding: 5px; 
	text-align: center; 
	background-color: white; 
	border: solid 2px green; 
	} 
#p1 { 
	padding: 50px; 
	width:100px; 
	display:none; 
	color: green; 
	font-style: italic; 
	} 
#f1 { 
	width:190px; 
	}	 
</style> 
</head> 
<body> 
<h1 align="center">انیمیشن اسلاید کشویی</h1> 
<center> 
<div id="f1">کلیک کنید</div> 
<div id="p1">به سایت فرازگر خوش آمدید</div> 
</center> 
<script type="text/javascript"> 
	$("#f1").click(function(){ 
		$("#p1").slideDown("slow"); 
	}); 
</script> 
</body> 
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.