Multiline Text Truncation Plugin With jQuery - Dynamic Max Height
File Size: | 8.65 KB |
---|---|
Views Total: | 3365 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Dynamic Max Height is a jQuery multiline text truncating plugin for collapsing long blocks of text with a "Read more" link which allows you to expand the content with a CSS3 transition effect.
How to use it:
1. Add data-maxheight
value to set the visible area.
<div class="dynamic-max-height" data-maxheight="70"> <div class="dynamic-wrap"> <p> Long Content Goes Here</p> </div> <div class="align-center"> <a class="dynamic-show-more" href="javascript:;" title="Read more" data-replace-text="Show less"> Read more </a> </div> </div>
2. Add the latest version of jQuery library and the Dynamic Max Height plugin to your webpage.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="jquery.dynamicmaxheight.js"></script>
3. Initialize the plugin and define the trigger selector.
$('.dynamic-max-height').dynamicMaxHeight( { trigger : '.dynamic-show-more'} );
4. Add CSS3 transitions to the text wrapper.
.dynamic-wrap { -webkit-transition: max-height 0.25s ease-in-out; -moz-transition: max-height 0.25s ease-in-out; transition: max-height 0.25s ease-in-out; width: 100%; overflow: hidden; position: relative; }
5. Add a bottom gradient to the text wrapper when collapsed.
.height-active .dynamic-wrap:before { content: ''; position: absolute; left: 0px; right: 0; bottom: 0; height: 30px; background: -moz-linear-gradient(top, rgba(240,249,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(240,249,255,0)), color-stop(100%, rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(240,249,255,0) 0%, rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(240,249,255,0) 0%, rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(240,249,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(to bottom, rgba(240,249,255,0) 0%, rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f0f9ff', endColorstr='#ffffff', GradientType=0 ); z-index: 1; }
6. Style the read more and show less links.
.dynamic-max-height.height-active .dynamic-show-more { display: inline-block; } .dynamic-max-height .dynamic-show-more { display: none; margin-top: 20px; }
Change log:
2016-02-09
- Fix javascript init
This awesome jQuery plugin is developed by JoanClaret. For more Advanced Usages, please check the demo page or visit the official website.