123-JZTXT

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-1.12.4.js"></script>
	<style>
		article{
			height: 100px;
		}
		article:nth-of-type(n+4):hover{
			cursor: pointer;
		}
		article:nth-of-type(n+4):hover:after{
			content: "click to hide article";
			font-style: italic;
			color: blue;
			font-size: 20px;
		}
	</style>
	<body>
		<article>Pretent this is a preview(1) foe an article on a blog</article>
		<article>Pretent this is a preview(2) foe an article on a blog</article>
		<article>Pretent this is a preview(3) foe an article on a blog</article>
		<article>Pretent this is a preview(4) foe an article on a blog</article>
		<article>Pretent this is a preview(5) foe an article on a blog</article>
		<article>Pretent this is a preview(6) foe an article on a blog</article>
		<button id="articles">Click to preview additional articles</button>
		<script>
			$(function(){
				$("body").css("height",$(document).height()+1)
				.find("article").each(function(i,el){
					$(el).not(":nth-last-of-type(n+4)").hide()
					.filter(":nth-of-type(4)").on("click.y",function(){
						$("body").animate({
							scrollTop:"0px"
						},1000)
					});
					
					
				});
				$(document).on("scroll.article",{
					"scrolled":false
				},function (e){
					if(!e.data.scrolled){
						var el=$("article:nth-of-type(n+4)");
						$(el).show(1000);
						e.data.scrolled=true;
					};
					if(e.data.scrolled){
						$(el).on("click",function(e){
							$(e.target).hide(1000);
						});
					};
					if($("article:nth-of-type(n+4)").css("display")==="none"){
						e.data.scrolled=false;
					};
					return false;
				});
				$("#articles").on("click",$(document),function(e){
					$(e.target).trigger("scroll.article").scroll()
				})
			});
		</script>
	</body>
</html>