Ul list expand - less and more
assume that i h开发者_运维知识库ave one like this;
<ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
i want use jquery to show 3 li and after the 3 one append a more li named more and when click show all li and append in the last li named less
This should work.. =) Just change index to the number of items you want to show.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var index = 2;
$('ul li:gt('+index+')').hide();
$('ul').append('<li class="more">more...</li>');
$('ul li.more').click(function() {
$('ul li.more').remove();
$('ul li:gt('+index+')').show();
});
</script>
I have tried this :
your HTML :
<ul id='ul'>
<li>2</li>
<li>3</li>
<li id='more'>more</li>
<li id='4' style='display:none'>4</li><br/>
<li id='5' style='display:none'>5</li><br/>
<li id='less' style='display:none'>less</li>
</ul>
your jQuery :
$('#more').click(function(){
$('#more').css('display','none');
$('#4').css('display','inline');
$('#5').css('display','inline');
$('#less').css('display','inline');
});
$('#less').click(function(){
$('#less').css('display','none');
$('#4').css('display','none');
$('#5').css('display','none');
$('#more').css('display','inline');
});
See this working here.
Correct me if I am wrong.
A full demonstration of HTML code:
I've taken help from this code http://jsfiddle.net/gaby/tNGxN/3/
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>HTML list (ul) expand/collapse - more/less</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('ul li').hide().filter(':lt(3)').show();
$('ul').append('<li><span> + Read More</span><span class="hide-items"> - Read Less</span></li>')
.find('li:last').click(function(){
$(this)
.siblings(':gt(2)')
.toggle()
.end()
.find('span')
.toggle();
});
});
</script>
<style>
.hide-items{display:none;}
</style>
</head>
<body>
<ul>
<li>item one</li>
<li>item two</li>
<li>item three</li>
<li>item four</li>
<li>item five</li>
<li>item six</li>
</ul>
</body>
</html>
加载中,请稍侯......
精彩评论