Skip to content

This is a very simple library for creating "Read More" buttons for long documents build with Vanila JS

Notifications You must be signed in to change notification settings

mbmohib/read-more-button-plugin

Repository files navigation

Read More Button Library

This is a very simple plugin for creating "Read More" buttons for long documents build with Vanila JS

  • There are currently two type of "Read More" styles 1. "Overlay Effect with Read More" 2. Simple "Read More"
  • You can change the document length for excerpt and button text
  • For "Overlay Effect with Read More" necessary style is applied by JS, you can disable it
  • Add polyfill for support older browser

Instruction

  1. Copy 'read-more.js' from dist folder into assets.
  2. Your HTML Structure should be :
<div class="selectors">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit......
</div>
  1. Add this line to the top of the documents
import { ReadMoreOverlay, ReadMoreBtn } from './read-more';
  1. Initiate:

For Overlay Effect :

new ReadMoreOverlay({
    selectors: elements,
    readMoreBtnText: 'Read Full Content',
    length: 400,
    sliceLength: 200,
});

For Simple Effect :

new ReadMoreBtn({
    selectors: elements,
    readMoreBtnText: 'Read More',
    length: 500,
    sliceLength: 300
});

Option

Option Default Value Value
selectors null Provide appropriate selectors
readMoreBtnText Read More String
length 300 integer
sliceLength 100 integer
overlayStyle null false (This will prevent adding style to Overlay Div)
maxHeight 1000 integer

TODO

  • Remove duplicate code
  • Convert into Class from Object
  • Create another "Read More" style
  • Create proper documentation
  • Support jQuery selectors

License

About

This is a very simple library for creating "Read More" buttons for long documents build with Vanila JS

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published