454 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • United Kingdom
Gareth_Gillman says

I am trying to build a jQuery load more but got stuck on the each function,

I have a list of 5 ul’s which have children and grand children, I want to show the top ul, the second ul and only a small portion of the grandchidren

This works well but when I click the load more, it opens every UL and not just the one I wanted…

It should look like:

- main item – child item – grandchild – grand child – load more

My code:

$(document).ready(function () {
  $('.loadMore').hide();
  $(".box-category li ul li").each(function() {
   $("ul", this).each(function() {
    $('.loadMore').show();
    $('.box-category li ul li ul').css({'overflow' : 'hidden', height : '50px'});
    $('.loadMore').click(function () {
     $('.box-category li ul li ul').css('height','auto');
     $('.loadMore').hide();
    });
   });
  });
 });
1399 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

Maybe this?

$( document ).ready( function () {

    var $loadMore = $( '.loadMore' );

    $loadMore
        .hide( 0 )
        .show();

    $( '.box-category li ul li ul' )
        .css({ 'overflow' : 'hidden', height : '50px' });

    $loadMore.click( function() {

        var $this = $( this );

        $this
            .hide()
            .closest( 'ul' )
                .css('height','auto');

    });

});
475 posts
  • Exclusive Author
  • Has been a member for 0-1 years
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • United Kingdom
  • Attended a Community Meetup
FlatKing says

Have you tested it with closest? http://api.jquery.com/closest/

Edit: Dammit OriginalEXE ahah too fast for me!

454 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • United Kingdom
Gareth_Gillman says

Very close OE but when clicked, the load more disappears as intended but the UL height doesn’t change … I am guessing the closest isn’t finding the UL properly

My HTML if it helps:

  • list
    • list
      • list
      Load more
1399 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

Could you maybe set up html example here? http://jsfiddle.net/

454 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • United Kingdom
Gareth_Gillman says
1399 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

Ok, here is the fixed js:

$( document ).ready( function () {

    var $loadMore = $( '.loadMore' );

    $loadMore
        .hide( 0 )
        .show();

    $( '.box-category li ul li ul' )
        .css({ 'overflow' : 'hidden', height : '50px' });

    $loadMore.click( function() {

        var $this = $( this );

        $this
            .hide()
            .siblings( 'ul' )
                .css('height','auto');

    });

});
454 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • United Kingdom
Gareth_Gillman says

Ok, here is the fixed js:
$( document ).ready( function () {

    var $loadMore = $( '.loadMore' );

    $loadMore
        .hide( 0 )
        .show();

    $( '.box-category li ul li ul' )
        .css({ 'overflow' : 'hidden', height : '50px' });

    $loadMore.click( function() {

        var $this = $( this );

        $this
            .hide()
            .siblings( 'ul' )
                .css('height','auto');

    });

});

Absolute beauty, thanks so much :)

454 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
  • Referred between 1 and 9 users
  • United Kingdom
Gareth_Gillman says

How can I add the $loadLess into the $this element, like you have with the $loadMore?

I have got the show less working in that it hides the ul after it has been opened etc, but on clicking the load more icon, it opens all of the less text elements.

I know I need to add the hide() etc for it to the $this event but not sure how to do it, updated the js fiddle with what I have

1399 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says
by
by
by
by
by
by