View More and Less by height Element

View More and Less by height Element

by Adi Jaya

HTML

<div class="article">
Lorem ipsum dolor sit amet, id illud pertinacia per. Nam putent utamur definiebas ea. Has facete indoctum voluptatum an, eu libris oblique vix.
</div>

<div class="article">
<p>
Lorem ipsum dolor sit amet, id illud pertinacia per. Nam putent utamur definiebas ea. Has facete indoctum voluptatum an, eu libris oblique vix. In nec dicit sensibus, quo te enim nobis scaevola. Est ludus fierent expetendis an. Vel nihil numquam te, at dicant nonumy erroribus sit, viris regione qualisque sit id.
</p>
<p>
Ludus aliquando incorrupte sea ad. Sea et doming minimum gloriatur, meliore electram philosophia an pro, nec an nominavi voluptaria. Te minim epicuri eos. Tincidunt definitionem eos ex, et pri augue harum. Nec ludus labores at.
</p>
</div>

<div class="article">
Lorem ipsum dolor sit amet, id illud pertinacia per.<br>Nam putent utamur definiebas ea. Has facete indoctum voluptatum an,<br>eu libris oblique vix.<br>In nec dicit sensibus, quo te enim nobis scaevola.<br>Est ludus fierent expetendis an. Vel nihil numquam te, at dicant nonumy erroribus sit,<br>viris regione qualisque sit id.
</div>

CSS

body {
    background: #fff;
    font-family: sans-serif;
    line-height: 1.4;
    font-size: 15px;
}

.article {
    position: relative;
    padding: 15px;
    margin: 1em 0;
    border: 1px solid silver;
    overflow: hidden;
}

.article.expanded {
    height: 74px;
}

.article p {
    margin-top: 0;
}

.view {
    color: #ffffff;
    position: absolute;
    bottom: 5px;
    right: 5px;
    vertical-align: middle;
    z-index: 100;
    cursor: pointer;
    background: #00BCD4;
    border: 1px solid #0494a7;
    padding: 4px 8px;
    border-radius: 2px;
}

.view.less {
    background: #4CAF50;
    border: 1px solid #388a3c;
}

JavaScript

$( document ).ready(function(){

	$( ".article" ).each(function(){
    	var $default = 84;
    	var thisHeight = $( this ).height();
        
        
        if( thisHeight > $default ){
        	$( this ).addClass( "expanded" );
            $( this ).append( "<div><button class='view'>View more</button></div>" );
        }
        
    });
    
    
    
    $( document ).on( "click", ".view", function(){
    	var parents = $( this ).parents( ".article" );
        
        if( parents ){
        	parents.toggleClass( "expanded" );
            
            if( parents.hasClass( "expanded") ){
            	$( this ).html( "View more" ).removeClass( "less" );
            } else {
            	$( this ).html( "View less" ).addClass( "less" );
            }
            
        }
        
    });
    
});