576 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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();
    });
   });
  });
 });
1477 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
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
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+3 more
FlatKing says

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

Edit: Dammit OriginalEXE ahah too fast for me!

576 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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
1477 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says

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

576 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
Gareth_Gillman says
1477 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
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');

    });

});
576 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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 :)

576 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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

1477 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+3 more
OriginalEXE says
by
by
by
by
by
by