Simple-load-more - This jQuery function will add a functionality to load 5 (or custom) more items. No AJAX functionality.

Overview

Simple Load More

This jQuery plugin will add a functionality to load 5 (or custom) more items. Best for lists that are long and you want to hide all except first 5 (or custom) and then show a "Load More" button. When that button is clicked, it loads another 5 items.

Note: this is not AJAX based. It just hides all the items except the first 5 (or custom) and shows another 5 when button is clicked.

View Demo

Downlaod

Via NPM

Download this plugin using this NPM commend.

npm i simple-load-more

Regular

Simply close this repository or download it as zip. After that, include the jquery.simpleLoadMore.js file in the head or footer of your HTML page.

<script src="/js/jquery.simpleLoadMore.js"></script>

You can also use the minified version, which is: jquery.simpleLoadMore.min.js

Usage

$('.some-element').simpleLoadMore({
  item: '.element-item',
  count: 5,
  // itemsToLoad: 10,
  // btnHTML: '<a href="#" class="load-more__btn">View More <i class="fas fa-angle-down"></i></a>'
});

Options

Option Type Default Description
item string (jQuery Selector) null Set the class of the actual items this plugin should take in count.
count integer 5 Set the number of items to show at first and load after the button is clicked (if itemsToLoad is not set)
itemsToLoad integer value of count set the number of items to load. Set to -1 to load all at once.
btnHTML string (html) <a href="#" class="load-more__btn">View More <i class="fas fa-angle-down"></i></a> Set a custom button here.
btnText string View More Set button's custom text here. Use placeholders {showing} and {total} for showing items counter. Where {showing} shows the current number of items displaying and {total} shows the total items one instance has.
cssClass string load-more Set the custom CSS class for the instance. Do not include dot in the class name, e.g., new-class
showCounter boolean false Shows the counter in a separate tag. By default enabling this option will show a text Showing X out of X before the load more button. View Demo for the example.
counterText string Showing {showing} out of {total} Set custom counter text here. Use placeholders {showing} and {total} in the text. Where {showing} shows the current number of items displaying and {total} shows the total items one instance has.
btnWrapper string (html) | boolean <div class="load-more__btn-wrap"></div> Wrap custom HTML tag around the 'Load More' button. Or set this to false to completely remove the wrapper
btnWrapperClass string null Add a custom CSS class to the button wrapper.
easing string fade This property determines how the items should load when the button is clicked. You can set it to fade or slide.
easingDuration string 400 Defines how long it should take to load next items. The value is in milliseconds.

Changelog

1.5.2

  • Improvement: remove button wrapper as well when all items have been loaded.

1.5.0

  • Feature: ability to set a custom button wrapper and wrapper class
  • Feature: ability to change easing to 'slide'. Default is 'fade'
Comments
  • Adding a callback function for when the list is exhausted

    Adding a callback function for when the list is exhausted

    Is there a way to implement a Callback function when the list is completely shown (and the ‘More’ button is hidden)? Meaning, when the last items are displayed to the user, is there a way that I can detect that and trigger a function of my own to do additional processing.

    What I’m trying to do is get the next set of records from the database (via AJAX) so the user can ‘transparently’ continue viewing them, until all the records are exhausted.

    BTW: I have implemented simple-load-more throughout the app and it works great! I think adding this little feature will make it a more robust tool since it will then not be limited to just the initial retrieve/list display.

    enhancement 
    opened by MicJarek 3
  • Bottom Center btnHtml

    Bottom Center btnHtml

    I'm trying to position the btnHtml on bottom center with TailwindCSS but without success, here's the code

      <script>
    $('.gallery').simpleLoadMore({
      item: 'div',
      count: 180,
      btnHTML: `<a href="#" class="load-more__btn rounded-2xl bg-white text-red-500 px-5 p-2 font-bold mx-auto">View More <i class="fas fa-angle-down"></i></a>`,
    });
      </script>
    

    Result: image

    opened by Daishiky 3
  • Ability to wrap HTML around the 'MORE' button

    Ability to wrap HTML around the 'MORE' button

    Opening this thread on request of @MicJarek

    I will be creating a new option using which you can wrap the 'MORE' button in HTML. The purpose is to allow users to apply custom classes and styles on the button. E.g., horizontally centering the button

    enhancement 
    opened by zeshanshani 3
  • Fix bug

    Fix bug

    • Fix the typo that broke the script
    • Fix the small bug that displays the strange number when the initial "count" is larger than the actual number of items
    opened by johnsonkit 1
  • Customize how the list is displayed

    Customize how the list is displayed

    Great little plugin. Light-weight, easy to implement, and works like a charm. The only thing missing is a custom variable to set how the next list of items will be displayed. Currently clicking the 'Next' button uses fadeIn(), but an option to allow for i.e. slideDown() would be a great addition.

    enhancement 
    opened by MicJarek 1
  • Count element showed/total and count view more clicks

    Count element showed/total and count view more clicks

    I was asking if there was the possibility to insert, first of the button "View More", the number of current elements showed / number of total elements. It would be great if after click on View More the counter of current news was updated. I make a simple example. If I have this configuration, with 50 elements: count: 10, itemsToLoad: 5

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10
  • Number of news: 10/50 View more >

    After the click of the button view more the elements will be 15 and the counter of the current elements will be 15/50 until to get all the elements. Another appreciate issue would be the number of clicks, before View More button until to get the end of elements. In the previous example, given a total of 50 elements, starting with 10 and increasing of 5 elements each time, it should be so:

    Number of news: 10/50 [-8] View more >

    After the click of "View more" button, the counter of clicks decrease until to get -1, when it arrives to 0 it means we have showed all the elements and so both counter click and view more button is not showed.

    enhancement 
    opened by kant1983 1
  • Bump jquery from 3.4.0 to 3.5.0

    Bump jquery from 3.4.0 to 3.5.0

    Bumps jquery from 3.4.0 to 3.5.0.

    Commits
    • 7a0a850 3.5.0
    • 8570a08 Release: Update AUTHORS.txt
    • da3dd85 Ajax: Do not execute scripts for unsuccessful HTTP responses
    • 065143c Ajax: Overwrite s.contentType with content-type header value, if any
    • 1a4f10d Tests: Blacklist one focusin test in IE
    • 9e15d6b Event: Use only one focusin/out handler per matching window & document
    • 966a709 Manipulation: Skip the select wrapper for <option> outside of IE 9
    • 1d61fd9 Manipulation: Make jQuery.htmlPrefilter an identity function
    • 04bf577 Selector: Update Sizzle from 2.3.4 to 2.3.5
    • 7506c9c Build: Resolve Travis config warnings
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by mgol, a new releaser for jquery since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Zeshan Ahmed
Entrepreneur. Certified Expert WordPress Developer @ Codeable. Maker of AllWPAddons.
Zeshan Ahmed
Magically convert a simple text input into a cool tag list with this jQuery plugin.

jQuery Tags Input Plugin Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns

XOXCO 2.3k Dec 23, 2022
Add live paragraph-, word- and character-counting to an HTML element.

Countable Countable is a JavaScript function to add live paragraph-, word- and character-counting to an HTML element. Countable is a zero-dependency l

Sacha Schmid 1.6k Dec 2, 2022
Add Github like mentions autocomplete to your application.

⚠️ Announcement ⚠️ This project was no longer maintained. You could use zurb tribute instead. An autocompletion library to autocomplete mentions, smil

Harold.Luo 5.3k Dec 19, 2022
jQuery Form Plugin

jQuery Form Overview The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajax

null 5.2k Jan 3, 2023
A jQuery UI plugin to handle multi-tag fields as well as tag suggestions/autocomplete.

Tag-it: a jQuery UI plugin Tag-it is a simple and configurable tag editing widget with autocomplete support. Homepage Demo Check the examples.html for

Alex Ehlke 2.5k Dec 20, 2022
jQuery plugin for styling checkboxes and radio-buttons

English description | Описание на русском jQuery-plugin for styling checkboxes and radio-buttons. With skin support. Version: 2.0.0 Project page and d

Denis Ineshin 70 Sep 24, 2022
A Zotero add-on that scans your Markdown reading notes, tags the associated Zotero items, and lets you open notes for the Zotero items in Obsidian.

Zotero Obsidian Citations Adds colored tags to Zotero items that have associated Markdown notes stored in an external folder. Open an associated Markd

Dae 210 Jan 4, 2023
The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Atugonza ( Billions ) Joel 14 Apr 22, 2022
A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Micheal Oguntayo 4 Oct 14, 2022
To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease.

TODO-LIST To Do List Application Organize your tasks with simple add and delete functionality. Organize your items with ease. Additional description a

Steve 12 Jul 22, 2022
Jquery-actualizer - jQuery ajax actualizer

jQuery AJAX Actualizer Include jQuery & this plugin into your HTML file and use this js code: $('#target').actualizer('a'); On click at any A element,

Šimon (Simon) Rataj 1 Jul 28, 2020
A secondhand marketplace where you can post items for sale, interact with sellers, save items you are interested in.

Curbside - the secondhand market place that's actually pleasant to use Post items for sale, interact with sellers, save items you are interested in. A

Curbside 14 Sep 9, 2022
Kuldeep 2 Jun 21, 2022
Simple patch that adds a 'progress' callback to jquery Ajax calls

Jquery Ajax Progresss A simple patch to jQuery that will call a 'progress' callback, using the XHR.onProgress event Usage Simply include the script on

Chad Engler 118 Sep 8, 2022
Allows users to quickly search highlighted items on Wikipedia. Inspired by the "search Wikipedia" function on the kindle mobile app.

wikipedia-search Allows users to quickly search highlighted items on Wikipedia. Inspired by the "search Wikipedia" function on the kindle mobile app.

Laith Alayassa 18 Aug 15, 2022
jQuery-plugin for add/remove dom-items with renaming form-elements (arrays)

dynamicrows jQuery-plugin for add/remove rows by cloning existing row / renaming form-elements (arrays). Requirements jQuery >=2.0 if move-action used

Dennis Dohle 0 Nov 9, 2020
Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application

Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application. It uses html5 canvas to create cropped images and css3, so it only works on latest browsers.

null 1 Feb 15, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022