Works like a champ! Thank you again (mkmanning and karl) for all of
your help.
On Jun 19, 9:16 pm, bombaru <bomb...@gmail.com> wrote:
> 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;
> > >>> });
> > >>> });
