YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar sven.grossenbacher asked

Load more function

Hi

I wanted to ask if we have a Load More function in Uikit3

Meaning that if we for example load a page then 6 items are shown in the grid and when we click load more button than another 6 items show below a.s.o - could be used in galleries or in my case in a portfolio.

I imagine it to be a JS option for the data attribute but I am not sure if it exists?

Thanks

Update

Thanks Michael but no that'is not what I meant. The Toggle only shows 1 hidden div and not as many as I want.

I need to be able to show 6 or 4 or X items in the grid - when clicking the Load More Button 6 or 4 or X more items show and when I click again another 6 items show a.s.o

Here a code sample

Update
I added it to the Yootheme Pro wishlist as suggested by Kayhan.
If you think that this is an interesting feature please vote for it (search for Load More Function) here
Thanks all

  • General Question
  • UIkit

Edited

6 Answers

0

Avatar yannis answered

Hi, i dont know if it will help you, but in yootheme pro i created rows with a specific class for example divToShow.
i added in the css
.divToShow{
display:none;
}

and in theme js i added the following

jQuery(document).ready(function () {  
    jQuery('.divToShow').slice(0, 3).show().css('display', 'flex');  
    if (jQuery('.divToShow:hidden').length != 0) {  
        jQuery('#load_divToShow').show();  
    }         
    jQuery('#load_divToShow').on('click', function (e) {  
        e.preventDefault();  
        jQuery('.divToShow:hidden').slice(0, 6).slideDown().css('display', 'flex');  
        if (jQuery('.divToShow:hidden').length == 0) {  
            jQuery('#load_divToShow').fadeOut('slow');  
        }  
    });  
});

and under the section with the rows i added a button with id #load_divToShow

works fine for me, i hope it helps

Know someone who can answer? Share a link to this question via email or twitter.