900 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
+4 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();
    });
   });
  });
 });
1509 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
+2 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');

    });

});
481 posts
  • Sells items exclusively on Envato Market
  • Has sold $1,000+ on Envato Market
  • Attended one of our Meetups around the world
  • Located in United Kingdom
+3 more
FlatKing says

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

Edit: Dammit OriginalEXE ahah too fast for me!

900 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
+4 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
1509 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
+2 more
OriginalEXE says

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

900 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
+4 more
Gareth_Gillman says
1509 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
+2 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');

    });

});
900 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
+4 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 :)

900 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
+4 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

1509 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
+2 more
OriginalEXE says

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by