Javascript show more list

jQuery show a number of list items, fade them out then show some more

The following tutorial shows you how to do «jQuery show a number of list items, fade them out then show some more».

The result is illustrated in the iframe.

You can check the full source code and open it in another tab using the links.

Javascript Source Code

The Javascript source code to do «jQuery show a number of list items, fade them out then show some more» is

$(document).ready(function() < var show = 9; var current = show - 1; var length = 60; var gallery = $('#gallery'); for (var i = 0; i < length; i++) < var n = $('').appendTo(gallery).text('Item ' + i); if (i > current) n.hide(); > var galleryItems = gallery.children('li'); length = galleryItems.length; setInterval(function()< current = (current+1)%60; galleryItems.eq(current).slideDown(); galleryItems.eq(current - show).slideUp(); >, 3000); >);

html> head> meta name="viewport" content="width=device-width, initial-scale=1" /> script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.js" > style id="compiled-css" type="text/css"> #gallery !-- w w w . d em o 2s . co m--> width: 150px; border-bottom: 1px solid #666; > #gallery li < border-top: 1px solid #ccc; padding: 5px 10px 6px; text-align: center; >  body> ul id="gallery">  script type='text/javascript'> $(document).ready(function() < var show = 9; var current = show - 1; var length = 60; var gallery = $('#gallery'); for (var i = 0; i < length; i++) < var n = $('').appendTo(gallery).text('Item ' + i); if (i > current) n.hide(); > var galleryItems = gallery.children('li'); length = galleryItems.length; setInterval(function()< current = (current+1)%60; galleryItems.eq(current).slideDown(); galleryItems.eq(current - show).slideUp(); >, 3000); >);   

Related

• jQuery ‘s fadeOut and callback — two elements shows up when action is made fast
• jQuery scroll fadeout
• jQuery sequence fadeOut and then remove
• jQuery show a number of list items, fade them out then show some more
• jQuery show a number of list items, fade them out then show some more (Demo 2)
• jQuery slide and fade out with delay doesnt work
• jQuery slide show, issue with fadeOut

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

JavaScript library that truncates text, list or table by chars, elements or rows.

License

tomickigrzegorz/show-more

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

JavaScript library that truncates text (html experimentally), list or table by chars, elements or row and shows/hides text blocks, elements or table row with Show More and Show Less.

Clone the repo and install dependencies

git clone cd show-more yarn // or npm i

yarn prod // or npm run prod

 script src pl-s">/path/to/showMore.min.js">script>

script src pl-s">https://cdn.jsdelivr.net/gh/tomickigrzegorz/show-more@1.1.6/dist/js/showMore.min.js">script>

link rel pl-s">stylesheet" href pl-s">https://cdn.jsdelivr.net/gh/tomickigrzegorz/show-more@1.1.6/dist/css/show-more.min.css" />

 link rel pl-s">stylesheet" href pl-s">/path/to/show-more.min.css" />

/* styling buttons */ .show-more-btn < margin: auto; cursor: pointer; color: #0095e5; white-space: nowrap; transition: color 300ms ease-in-out; border: 0; font-size: 0.8em; background: transparent; > .show-more-btn:hover < color: red; > .hidden < display: none; >

div class pl-s">element" data-config=' '> Lorem ipsum, dolor . . div>

ul class pl-s">element" data-config=' '> li>item 1li> li>item 2li> . ul>

table class pl-s">element" data-config=' '> . table>

div class pl-s">element links-style" data-config=' '> a href pl-s">#">Administracja biur,a> div>

Show the number next to the button → live example:

ul class pl-s">element display-inline" data-config=' '> li>Usługi murarskie i tynkarskie,li> . ul>

div class pl-s">element" data-config=' '> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. div>

div class pl-s">element" data-config=' '> b>Lorem ipsum dolor sitb>, amet consectetur adipisicing elit. Libero deserunt dignissimos blanditiis animi esse veritatis, quasi, ab, commodi itaque quisquam delectus inventore perspiciatis corrupti! table> thead> th>oneth> th>twoth> th>threeth> thead> tr> td>atd> td>btd> td>ctd> tr> tr> td>dtd> td>etd> td>ftd> tr> table> Sequi debitis suscipit molestias, eligendi ab odit ullam. Vero eius debitis quis corporis, possimus veniam sit fugit aliquid. img src pl-s">https://grzegorztomicki.pl/images/maroko/1200/IMG_0738.jpg" /> Fuga, libero eaque consequuntur ipsa esse omnis, ad eius laboriosam reprehenderit iste quaerat vitae quis corrupti saepe veniam, ullam placeat voluptatum sint dolore sunt quo. Voluptate fugit quo architecto laboriosam i>ipsam pariatur delectus iusto consectetur providenti> odio amet tempora veniam velit at deleniti sint soluta accusamus, praesentium necessitatibus maxime.br />br /> Aliquam necessitatibus porro dolores atque aliquid itaque, ad maiores! div>

document.addEventListener('DOMContentLoaded', function ()  // text, table, list, elelemnts new ShowMore('.element',  onMoreLess: (type, object) =>  // type = less/more and full object console.log(type, object); >, >); >);

document.addEventListener('DOMContentLoaded', function ()  new ShowMore('.element',  // you can also add your own regular expression, // it will only apply to text elements. regex:  image:  match: /([\w\W]+?)[/]?>/g, replace: '', >, >, >); >);

If you have one type of items that you want to shorten, you can add global configuration, you don’t need to add data-config to each item. Below is an example:

document.addEventListener('DOMContentLoaded', function ()  new ShowMore('.element',  config:  type: "text", limit: 120, more: "→ read more", less: "← read less" > >); >);

You can also mix, global configuration + data-config . In such cases, the global configuration object will merge with data-config . For example, we have 10 texts to shorten, then we add the global configuration, but we also have a table that we want to shorten, in this case we add data-config to table — see table example

You don’t need to add all the variables in the data-config . For example, if we have more/less buttons in global configuration then in data-config we do not have to declare them, but if we add them, they will overwrite their settings in globalen configuration.

Configuration of the plugin

element	require	description
your-class	✔	name of the class after which we want to add support for showing/hiding text, list or table
data-config	✔	embedding JSON in the html, the entire configuration of a particular element
type	✔	we have three type after which it will be hidden [text, list or table]
limit	✔	text after how many characters to hide the text and insert show more/less list or table after how many elements/rows hide the rest and insert show more/less
after	this parameter checks how much text is after the trimmed text the limit parameter, if the text is less than the after parameter does not add a more/less button`^.
element	on the parameter we will create an html element and put in the text show more/less
more/less	is the text and chars that appears after the text, list or table e.g. > show more and < show less
number	number of hidden items to show more/less e.g. -> show more 3 , only works for list and table
ellipsis	By default, adding an ellipsis to shortened text can be turned off by setting ‘ellipsis’: false
nobutton	Diable showing the read more/less button, by default ‘nobutton’: false
regex	adding your own regular expressions. It is an object with two parameters match and replace , see example below
btnClass	Button class name. Default: show-more-btn
btnClassAppend	Opportunity to add additional classes to the button
onMoreLess	callback function

^ Let’s say we have 20 records with text and we determine that the text is to be trimmed after 100 characters in each record, it may happen that in several records the text is very short and has 110 characters, so show more/less will appear after 100 characters and after clicking an additional 10 characters, it will look funny. To prevent this, we add the «after»: 50 parameter, which means that the hidden text must be at least 50 characters. Otherwise, show more/less will not appear. The same after can be applied to lists, elements and table records

Number of records counted in the table tr based on all tr of thead , tbody and tfoot

show-more supports all major browsers including IE 10 and above

Источник

Long List Truncation Plugin For jQuery — show-more-items.js

show-more-items.js is a small and easy list truncation plugin that limits the maximum number of list items to show on the webpage and creates a ‘Show More’ button to reveal the rest when needed. This is a great jQuery solution to emulate the ‘infinite scroll’ functionality on your web page containing tons of the list or grid items.

How to use it:

1. Suppose you have an image grid built using HTML unordered list like this:

  
Item 1
  
Item 2
  
Item 3
  
Item 4
  
Item 5
  
Item 6
  
Item 7
  
Item 8
 .

2. Put both jQuery JavaScript library (slim build) and the jQuery show-more-items.js script at the end of your document.

3. Call the function and done.

4. Specify how many list items to show at a time.

5. Style the show more button in your CSS file.

This awesome jQuery plugin is developed by vladan-m. For more Advanced Usages, please check the demo page or visit the official website.

Источник