hide reveal more content - Download Hide/Reveal Long Text On Demand - jQuery MoreContent

Download Hide/Reveal Long Text On Demand – jQuery MoreContent

By Posted on

This time I will share jQuery Plugin and tutorial about Hide/Reveal Long Text On Demand – jQuery MoreContent, hope it will help you in programming stack.

hide reveal more content - Download Hide/Reveal Long Text On Demand - jQuery MoreContent
File Size: 34.7 KB
Views Total: 3101
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

“

The MoreContent jQuery plugin automatically cuts off long text content within a container and reveals/hides them with a smooth toggle animation when needed.

Features:

  • Hides long content when exceeding the max height.
  • Fully responsive and works perfectly on window resize.
  • Custom Read More and Read Less buttons.
  • Custom trigger event. Default: ‘Click’.
  • Shadow effect on exceeded content.
  • Custom easing functions. 
  • Useful API methods.

How to use it:

1. Insert both jQuery JavaScript library and the MoreContent plugin into the document.

view source
1 <script src="/path/to/jquery.min.js"></script>
2 <script src="/path/to/jquery.morecontent.js"></script>

2. Call the function on the text container and done. By default the plugin will automatically hide exceeded text when the container is higher than 175px.

view source
1 <div class="example">
2   Long Text Here
3 </div>
view source
1 $('.example').moreContent();

3. Set the maximum height to trigger the Hide behavior. Default: ‘175’.

view source
1 $('.example').moreContent({
2   height: 200
3 });

4. Customize the trigger event to toggle the full content. Default: ‘Click’.

view source
1 $('.example').moreContent({
2   event: 'mouseover'
3 });

5. Apply a shadow effect to the exceeded content. Default: ‘false’.

view source
1 $('.example').moreContent({
2   shadow: true
3 });

6. Apply an easing effect to the toggle animation. You might need a 3rd easing library for extra easing functions. E.g. jQuery UI and jQuery easing plugin.

view source
1 $('.example').moreContent({
2   easing: 'easeOutBounce'
3 });

7. Customize the text for the read more and read less buttons.

view source
1 $('.example').moreContent({
2   textClose: 'Show More',
3   textOpen: 'Close'
4 });

8. More configuration options.

view source
01 $('.example').moreContent({
02   useCss: true,
03   speed: 250,
04   tpl: {
05     content: '<div class="mrc-content"></div>',
06     contentWrap: '<div class="mrc-content-wrap"></div>',
07     btn: '<button class="mrc-btn" type="button"></button>',
08     btnWrap: '<div class="mrc-btn-wrap"></div>',
09     controls: '<div class="mrc-controls"></div>',
10     shadow: '<div class="mrc-shadow"></div>',
11   }
12 });

9. API methods available.

view source
01 // re-init the instance
02 $('.example').moreContent('reinit');
03  
04 // hide the content
05 $('.example').moreContent('close');
06  
07 // reveal the content
08 $('.example').moreContent('Open');
09  
10 // toggle the content
11 $('.example').moreContent('toggle');
12  
13 // show some content
14 $('.example').moreContent('drop');
15  
16 // destroy the plugin
17 $('.example').moreContent('destroy');

10. Event handlers.

view source
01 instance.on('beforeInitSwitch.mrc', function(e, inst, sets) {
02   // console.log( 'change', inst.mode, inst.status );
03  
04   // inst.layout.drop = $('<button type="button">Показать больше</button>')
05   // .on('click', function() {
06   //  inst.layout.self.moreContent('drop', 15, '%');
07   // }).appendTo(inst.layout.controls).hide();
08  
09   // inst.layout.progress = $('<div></div>')
10   //  .insertBefore(inst.layout.content);
11 });
12  
13 instance.on('change.mrc', function(e, inst, sets) {
14   // console.log( 'change', inst.mode, inst.status );
15  
16   // if( inst.layout.drop ) {
17  
18   //  if( !inst.mode || inst.status ) {
19   //    inst.layout.drop.fadeOut(sets.speed);
20   //  } else {
21   //    inst.layout.drop.fadeIn(sets.speed);
22   //  }
23  
24   // }
25  
26   // if( inst.layout.progress ) {
27   //  inst.layout.progress.text(Math.ceil(inst.curHeight/(inst.fullHeight/100)) + '%');
28   // }
29  
30   // inst.manually = true;
31  
32   // content.animate({
33   //  height: height
34   // }, 1500, function() {
35   //  inst.afterChange('open');
36   // });
37 });
38  
39 instance.on('beforeOpen.mrc', function(e, inst, sets, content, height) {
40   // console.log( 'beforeOpen', height );
41  
42   // inst.manually = true;
43  
44   // content.animate({
45   //  height: height
46   // }, 1000, 'easeOutBounce', function() {
47   //  inst.afterChange('open');
48   // });
49 });
50  
51 instance.on('beforeClose.mrc', function(e, inst, sets, content, height) {
52   // console.log( 'beforeClose', height );
53  
54   // inst.manually = true;
55  
56   // content.animate({
57   //  // opacity: 1,
58   //  height: height
source : jquery.net

Related posts:

59