Read More

A truncated paragraph with the option of reading more content.

How to

The Read More component is used to truncate a paragraph and display a button that controls the visibility of the extra content.

Options #

The plugin comes with a list of options that you can use to customize its behavior.

Manual content truncation #

If you want to decide the exact point where the text is truncated, wrap the extra content using the .js-read-more__content class (Example).

<p class="read-more js-read-more" data-btn-class="read-more__btn js-tab-focus" data-ellipsis="off">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio corporis facilis, debitis a qui eum dolor repudiandae harum, impedit, fugit cumque. Tenetur, a quas labore eveniet accusantium, vero reiciendis quaerat inventore vel consequatur iusto fugiat perferendis rerum nihil qui deleniti earum eum numquam velit quod explicabo, fuga saepe ad temporibus! <span class="js-read-more__content">Facere et voluptas sint similique, sequi corporis consectetur id suscipit est placeat ut expedita temporibus quisquam at illo dolores, laudantium assumenda! Ut tempora qui repellat quibusdam odit beatae commodi unde iure sunt provident voluptate ipsam veniam culpa harum ducimus assumenda voluptas omnis, consequuntur quam id in quos rem, excepturi iusto!</span>

Set max number of characters #

You can set a max number of visible characters using the data-characters data type. By default, its value is equal to 200. However, if the plugin detects the .js-read-more__content element, it will ignore the data-characters value (Example).

<p class="read-more js-read-more" data-characters="220" data-btn-class="read-more__btn js-tab-focus">Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, sit et officiis velit, architecto magni, debitis saepe nemo delectus dolores sint impedit. Fuga ducimus iure, quasi error in doloribus quis minus aliquid laborum a ipsa delectus, placeat repellendus similique id aliquam? Amet possimus ipsam commodi nobis, voluptatum consectetur eaque praesentium voluptatem molestias mollitia rerum voluptatibus libero vero deleniti? Saepe praesentium ex ea. Nam perspiciatis magnam pariatur quisquam amet minus eveniet. Tempore suscipit ullam architecto pariatur reprehenderit perspiciatis reiciendis, assumenda praesentium!</p>

Ellipsis #

By default, the plugin injects ellipsis at the end of the truncated paragraph. You can modify this behavior by setting data-ellipsis="off".

Button style #

You can pass an array of classes to the button/control using the data-btn-class data type.

<p class="read-more js-read-more" data-btn-class="read-more__btn js-tab-focus">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

Button Labels #

By default, the plugin uses 'Read More' and 'Read Less' as labels for the button/control. You can change the deafult using the data-btn-labels data type.

<p class="read-more js-read-more" data-btn-labels="Show More, Show Less">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

Hide 'Read Less' button #

When user clicks the 'Read More' button, a 'Read Less' button is shown to give the user the option to go back to a truncated text. If you don't want to show it, set data-toggle="off".

<p class="read-more js-read-more" data-toggle="off">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>

Categories

• Plugins > Misc
• Controls
• Typography

Bug report & feedback

Component Github page ↗