Show more using Jquery

Posted: February 8, 2012 in web
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.e {
	margin:0;
	padding:0;
}
.e li {
	margin:0;
	padding:0;
}

</style>

<ul class="e">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
<li>Test8</li>
<li>Test9</li>
<li>Test10</li>
<li>Test11</li>
<li>Test12</li>
<li>Test13</li>
</ul>
<a href="#">View</a>
<script>

$(function(){
	$("ul.e li").hide();
	$("ul.e li:lt(2)").slideDown();
	$("a").click(function(ev){
		ev.preventDefault();
		$("ul.e li:hidden:lt(2)").slideDown();
		if($("ul.e li:last").is(":visible"))
			$(this).hide("slow");
	});

});
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s