"Less more via jquery "
Bootstrap 3.3.0 Snippet by faisalkhan123

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-12"> <p class="text-viewer">Learning Opportunity: You will get an opportunity to be a part of this ecosystem where growing, cooking, eating and celebration is an integral part of your life and learn the basics of permaculture and natural farming methods. You will be growing crops that have been sidelined by modern day industrialised agriculture and it’s homogenizing effects and learn about biodiversity and alternate food forms to what are now considered staples. You will be working with your hands in a quiet and beautiful expanse of land and have the opportunity to live in Auroville, a one of a kind experimental township that preaches human unity and is home to people from over 40 nationalities. Skills required (Specific ones, if any): No previous farming knowledge is required, but you must possess dedication, commitment and willingness to indulge in hard farm labour for 7 hours, 6 days a week. </p> </div> </div> </div>
.more, .less { font-weight: 600; color: #000; text-decoration:none; }
$(function(){ // here the code for text minimiser and maxmiser by faisal khan var minimized_elements = $('p.text-viewer'); minimized_elements.each(function(){ var t = $(this).text(); if(t.length < 500) return; $(this).html( t.slice(0,500)+'<span>... </span><a href="#" class="more"> Read More>> </a>'+ '<span style="display:none;">'+ t.slice(500,t.length)+' <a href="#" class="less"> << Less </a></span>' ); }); $('a.more', minimized_elements).click(function(event){ event.preventDefault(); $(this).hide().prev().hide(); $(this).next().show(); }); $('a.less', minimized_elements).click(function(event){ event.preventDefault(); $(this).parent().hide().prev().show().prev().show(); }); });

Related: See More


Questions / Comments: