Menu
I have a list element containing a number of between 20-30 events. I only want to show 5 of those, and have a «More» link I can click to watch the the next five. It doesn't matter if the five next events are appended.
Can't find a jQuery script that actually does this, or am I just blind? I don't want to use carousel plugins or anything like that.
342
Well, fortunately for us programmers, who write code for food and fame, not every imaginable piece of functionality has been written yet as a plugin :)
But this is quite easy:
var from = 0, step = 5;
function showNext(list) {
list
.find('li').hide().end()
.find('li:lt(' + (from + step) + '):not(li:lt(' + from + '))')
.show();
from += step;
}
function showPrevious(list) {
from -= step;
list
.find('li').hide().end()
.find('li:lt(' + from + '):not(li:lt(' + (from - step) + '))')
.show();
}
// show initial set
showNext($('ul'));
// clicking on the 'more' link:
$('#more').click(function(e) {
e.preventDefault();
showNext($('ul'));
});
Of course this is better extracted into plugin-like function, but I'm gonna leave that as an exercise for a reader ;)
138
<html>
<head><title>Test</title></head>
<body>
<ul class="more">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
<li>ten</li>
</ul>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("ul.more").each(function() {
$("li:gt(4)", this).hide(); /* :gt() is zero-indexed */
$("li:nth-child(5)", this).after("<li class='more'><a href='#'>More...</a></li>"); /* :nth-child() is one-indexed */
});
$("li.more a").live("click", function() {
var li = $(this).parents("li:first");
li.parent().children().show();
li.remove();
return false;
});
});
</script>
</script
</body>
</html>
Basically what this does:
Edit: Fixed up a few little errors. The above is a fully working example now (just make sure the jquery link is correct).
42
You want to start off with each element in the list hidden (CSS: display: none). Then have your more link undernearth the list element.
$(document).ready(function()
{
$("a#myMoreLink").click(function()
{
var items = $("ul#myList > li:hidden");
if(items.length > 0)
items.slice(0, 5).show();
else
$(this).html("No more");
return false;
});
$("a#myMoreLink").click();
});
With HTML:
<ul id="myList">
<li style="display: none"></li>
<li style="display: none"></li>
</ul>
<a href="http://" id="myMoreLink">More</a>
Something like that. $("a#myMoreLink").click(); is called to show the initial 5 items upon loading the page.
3
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
