Thanks mkmanning!!! I'll give this a try tomorrow and let you know.
Looking at it though... I'm pretty confident it will do the trick.
It's amazing how much more efficiently the original chunk of code can
be written and it still makes perfect sense (actually it's clearer).
On Jun 19, 7:36 pm, Karl Swedberg <k...@englishrules.com> wrote:
> Ah, I see. Helps to be able to see the HTML.
>
> Let us know if mkmanning's approach doesn't do the trick.
>
> --Karl
>
> ____________
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Jun 19, 2009, at 5:56 PM, bombaru wrote:
>
>
>
> > Thanks Karl... I'm not familiar with slice() but will definitely read
> > up on it. The problem I'm having with this approach is that every LI
> > after the 10th one is being hidden.
>
> > Here's an example of what the HTML looks like without any JS applied
> > to it:
>
> > <ul id="narrow-search">
> > <li class="main">
> > Category
> > <ul>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > </ul>
> > </li>
> > <li class="main">
> > Brand
> > <ul>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > </ul>
> > </li>
> > <li class="main">etc...</li>
> > </ul>
>
> > The HTML after your approach looks something like this:
>
> > <ul id="narrow-search">
> > <li class="main">
> > Category
> > <ul>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > </ul>
> > <ul style="display:none;">
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > <li>Category Name</li>
> > </ul>
> > <a href="#">more</a>
> > </li>
> > <li class="main">
> > Brand
> > <ul/>
> > <ul style="display:none;">
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > <li>Brand Name</li>
> > </ul>
> > <a href="#">more</a>
> > </li>
> > <li class="main">etc...</li>
> > </ul>
>
> > Something is getting screwed up. The first group looks good (but the
> > toggle does not work). From then on, the following LI groups are all
> > hidden and there's a strange <ul /> tag being inserted into the mix.
>
> > Any ideas?
>
> > On Jun 19, 5:18 pm, Karl Swedberg <k...@englishrules.com> wrote:
> >> I'd probably use .slice().
>
> >> Something like this should work:
>
> >> $(document).ready(function() {
> >> var $list = $('.main ul'),
> >> $items = $list.find('li'),
> >> $moreLink = $('<a href="#">more</a>');
>
> >> if ($items.length > 10) {
> >> $moreItems = $('<ul></ul>').append($items.slice(10)).hide();
> >> $list.after($moreLink).after($moreItems);
> >> $moreLink.click(function() {
> >> $(this).text($(this).text() == 'more' ? 'less' : 'more');
> >> $moreItems.slideToggle();
> >> return false;
> >> });
> >> }
> >> });
>
> >> --Karl
>
> >> ____________
> >> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> >> On Jun 19, 2009, at 4:54 PM, bombaru wrote:
>
> >>> There has got to be a better way to write this? Basically, I'm
> >>> returning a bunch of list item and after the 10th one, setting the
> >>> rest to display:none and adding a <more> link. Clicking on the
> >>> <more>
> >>> link removes the display:none and adds a <less> link at the bottom.
>
> >>> I think jQuery 1.3.2 is having some trouble with the nth-child
> >>> approach. Can someone point me in the right direction on how to
> >>> improve this?
>
> >>> Thanks.
>
> >>> $(document).ready(function() {
> >>> $('.main ul').each(function() {
> >>> $('li', this).each(function(i) {
> >>> if (i > 9) {
> >>> if (i == 10) {
> >>> $(this).parent().append('<li id=
> >>> \"toggleon
> >>> \" class=\"toggle\"><a href=\"#\">more >></a></li><li id=
> >>> \"toggleoff\"
> >>> class=\"toggle\" style=\"display:none\"><a href=\"#\"><< less</a></
> >>> li>');
> >>> }
> >>> $(this).hide();
> >>> }
> >>> });
> >>> });
>
> >>> $('li.toggle').click(function() {
> >>> $(this).parent().find('li:nth-child(10) ~ li').toggle
> >>> ();
> >>> $(this).find('#toggleon').toggle();
> >>> $(this).find('#toggleoff').toggle();
> >>> return false;
> >>> });
> >>> });
