(SO - 23042335)Know more , Know less(plugin)

by Jessel John

HTML

<div class="container">
<div class="header">HEADER</div>
<div class="wrapper">
<div class="wrappingText">This is less content</div>
</div>
    <div class="footer">FOOTER</div>
</div>
<div class="container">
<div class="header">HEADER</div>
<div class="wrapper">
<div class="wrappingText">This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.  Thanks.This is an example of a div that has wrapping text lines. 
Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.  Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.</div>
</div>
    <div class="footer">FOOTER</div>
</div>
<div class="container">
<div class="header">HEADER</div>
<div class="wrapper">
<div class="wrappingText">This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the mouse position.Thanks.This is an example of a div that has wrapping text lines.Move your mouse and watch each line highlight according to the...

CSS

/***THIS PART IS REQUIRED.CLASSNAMES ".container , .wrapper , .wrappingText" can be changed to the name you are using***/
.wrapper{
    position:relative;
}
html,body,.container,.wrapper,.wrappingText{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
.wrappingText{
    display:inline;
    overflow:hidden;
}
/***************************************************/

/***THIS PART WILL NOT CHANGE.REQUIRED FOR PLUGIN***/
.knowMore{
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:white;
    color:blue;
    cursor:pointer;
}
.knowMore:before{
    content:"...";
}
.knowMore:after{
    content:"More";
}
.knowLess:before{
    content:"";
}
.knowLess:after{
    content:"Less";
}

.visible{
    overflow:visible !important;
}

.parentClick{
    width:auto !important;
    height:auto !important;
}
/***************************************************/

/***EXTRA*****/

.header,.footer{
    background-color:yellow;
}
/*************/

JavaScript

/*******PLUGIN CODE START***********/
jQuery.fn.knowMoreLess = function(mainPar){
var txtCont;
var lineHeight = parseInt($(this).css('line-height').replace("px", ''));
    
    jQuery.fn.exists = function(){return this.length>0;}
    
function debugTxt(txt)
{
    txtCont.css('display','inline-block');
    var txtContHeight = txtCont.height();
    
    var calcOtherHeights = 0;
    txtCont.parent().siblings().each(function(){
        calcOtherHeights = calcOtherHeights+ $(this).height();
    });  
   txtCont.parent().height((lineHeight*Math.floor(txtContHeight/lineHeight))-calcOtherHeights);
    if ((txt*(lineHeight)+5+lineHeight)>txtContHeight)
       txtCont.parent().append('<div class="knowMore">Know </div>');
   else
      txtCont.parent().find('.knowMore').remove();
}
    
    $(this).each(function(){
        txtCont = $(this);
        var lines = $(this).get(0).getClientRects();
        debugTxt(lines.length);
    });

$('.knowMore').click(function(){
    $(this).prev().toggleClass("visible");
    var calcOtherHeights = 0;
   $(this).parent().siblings().each(function(){
        calcOtherHeights = calcOtherHeights+ $(this).height();
    });
    if($(this).data('clicked')){
     $(this).data('clicked',false);
     $(this).closest(mainPar).height($(this).data('parHeight'));
    }
    else{
     $(this).data('clicked',true);
     $(this).data('parHeight',$(this).closest(mainPar).height());
$(this).closest(mainPar).height($(this).prev().get(0).scrollHeight+calcOtherHeights+3);
    }
    $(this).toggleClass('knowLess');
    $(this).parent().toggleClass("parentClick");
});
}
/*******PLUGIN CODE END***********/

$('.wrappingText').knowMoreLess('.container'); //CALLING PLUGIN