No need for IDs, you can do it all using the elements' indexes:
Assuming a structure like this:
<ul id="posts">
<li>...</li>
...
</ul>
<a href="#" id="more">Next 3</a>
<a href="#" id="less">Previous 3</a>
I'd use this. A bit busy, but it's short! :)
//hide all but the first 3 posts
$posts = $('#posts li').show();
$posts.filter(':gt(2)').hide();
//set the navigation
$('#more,#less').click(function(){
var op = function(x){ return x ? 'next' : 'prev'; }
var m = this.id == 'more';
//get last OR first visible post
var visible = $posts.filter(':visible:'+ (m ? 'last' : 'first'));
//if any posts left - next() or prev()
if (visible[op(m)]().length)
//hide all visible, show next/prev 3
$posts.filter(':visible').hide();
visible[op(m)+'All'](':lt(3)').show().end()
return false;
});
You can replace show and hide for fadeIn and fadeOut for a nice
effect.
cheers,
- ricardo
On Apr 22, 11:18 am, ldexterldesign <m...@ldexterldesign.co.uk> wrote:
> Hey guys,
>
> I have 10 separate posts displayed on a page. I want to hide 7 (of the
> oldest) of them and display a link; 'show more posts' - kinda a
> pagination thing I guess.
>
> My PHP pumps out 10 posts, and I'd like to do the hide/show with JS.
>
> I'm aware I could simply add and remove a height class, hiding/
> revealing the posts, but I'd like to make it a bit more complex and
> have accurate control over how many posts are shown if my client turns
> around and says he wants 5 posts displayed prior to the button being
> clicked.
>
> Just thinking about how I might go about this in code I'm thinking of
> doing it the following way. I'm not an excellent programmer, so the
> time you'd, potentially, save me getting it clear in pseudo will most
> likely save me a lot of time this evening. Hell, there might even be a
> plug-in or simpler solution than below you can think of:
>
> - I get a unique 'post-x' ID for each of the posts, where 'x' is the
> post ID, so I was thinking about just hiding the lowest 7 numeric post
> IDs displayed on the page?
>
> Thoughts?
>
> :]
> L
