Saturday 15 June 2013

Script for Dynamic MORE or LESS and [all the DIV's become Less when One more option is clicked]

<script>
 $(document).ready(function () {
var showChar = 100;
 var ellipsestext = "...";
 var moretext = "more";
 var lesstext = "less";
 var txtlen = 1;
 $('.more').each(function () {
 var content = $(this).html();
 if (content.length > showChar) {
 var c = content.substr(0, showChar);
 var h = content.substr(showChar - 1, content.length - showChar);
 var html = c + '<span class="moreelipses">' + ellipsestext + '</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink" id=testimonial' + txtlen + '>' + moretext + '</a></span>';
$(this).html(html);
 }
 txtlen++;
 });
 $(".morelink").click(function () {
 if ($(this).hasClass("less")) {
 $(this).removeClass("less");
$(this).html(moretext);
 } else {

 for (var i = 1; i < txtlen; i++) {
if ($("a#testimonial" + i).attr('class') == "morelink less")
 {
 $("a#testimonial" + i).trigger("click");
 }
 }
 $(this).addClass("less");
 $(this).html(lesstext);
}
 $(this).parent().prev().toggle();
 $(this).prev().toggle();
 return false;
 });
 });
</script>

<div class="comment more">
 <?php 
              //give dynamic code
        ?>
</div>
<div class="comment more">
 <?php 
              //give dynamic code
        ?>
</div>

No comments:

Post a Comment