Styleguide Navigation

LoadMore

Updates

  • 2018-09-19 LoadMore button content markup changed for animation (markup) [pul]
  • 2018-11-29 SRWFE-733: LoadMore optional data-history attribute, will cause history state replacement of search params. (markup, js) [jch]

Default

"LoadMore" link takes a few parameters:

href

The page to load from – should work normally if JS is turned off or user opens in a new tab.

data-target

Selector for the list container to be updated. (usually a "ul" or "ol")

data-source (optional)

Selector for the list container from which to get the new items. (by default equals the data-target)

data-update (optional)

A comma separated list of selectors of elements to be updated with the loaded page. Usually this is the "load more" link itself, because it will point to another page.

Variant No AJAX

If you set the 'noAjax' option, the Load More option will remove a class on all child elements in the container set by data-target.

The default class to be removed is is-more
Set noAjax: 'is-invisible' to change the class to be removed.

data-target

Selector for the list container to be updated. (usually a "ul" or "ol")

data-update (optional)

A comma separated list of selectors of elements to be updated with the loaded page. Usually this is the "load more" link itself, because it will point to another page.