javascript - How to apply jquery ellipsis to div -

$('.more2').each(function() {            var showchar = 150;     var content = $(this).html();         if(content.length > showchar) {             var c = content.substr(0, showchar);             var h = content.substr(showchar, content.length - showchar);             var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';             $(this).html(html);     } }); 

i trying build jquery accordion effect div drop down; please see example jsfiddle. here want it's on-clicking of ('+') button want show reaming part of content. @ time else div in same row should take same height active div taken don't want show content in inactive div.

try adding document ready:

$('a.morelink').click(function(){     $(this).parent().find('span').toggle();     $(this).parent().parent().find('span.moreellipses').toggle();     $(this).parent().find('a').text($(this).text() == '[+]' ? "[-]" : "[+]");     return false; }); 

and replace:

$(".row1").height(maxheight); 

with

$(".row1").css({'min-height':maxheight,'height':'auto'}); 

so code be:

	$(document).ready(function() {  	  var maxheight = 0;  	  $(".row1").each(function() {  	    if ($(this).height() > maxheight) {  	      maxheight = $(this).height();  	    }  	  });  	  $(".row1").css({  	    'min-height': maxheight,  	    'height': 'auto'  	  });  	});  	$(document).ready(function() {  	  var ellipsestext = "...";  	  var moretext = "[+]";  	  var lesstext = "[-]";  	  $('.more1').each(function() {  	    var showchar = 172;  	    var content = $(this).html();    	    if (content.length > showchar) {    	      var c = content.substr(0, showchar);  	      var h = content.substr(showchar, content.length - showchar);    	      var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';    	      $(this).html(html);  	    }    	  });  	  $('.more2').each(function() {  	    var showchar = 150;  	    var content = $(this).html();    	    if (content.length > showchar) {    	      var c = content.substr(0, showchar);  	      var h = content.substr(showchar, content.length - showchar);    	      var html = c + '<span class="moreellipses">' + ellipsestext + ' </span><span class="morecontent"><span>' + h + '</span>  <a href="" class="morelink">' + moretext + '</a></span>';    	      $(this).html(html);  	    }    	  });    	  $('a.morelink').click(function() {  	    $(this).parent().find('span').toggle();  	    $(this).parent().parent().find('span.moreellipses').toggle();  	    $(this).parent().find('a').text($(this).text() == '[+]' ? "[-]" : "[+]");  	    return false;  	  });  	});

spk_desc {    font-size: 11px;    line-height: 15px;    padding: 15px;    position: relative;    top: 0;  }  .speaker_content_text_alt {    background: #eeeeee none repeat scroll 0 0;    padding: 5px;    position: relative;    width: 200px;  }  .speaker_content_text {    background: #dddddd none repeat scroll 0 0;    padding: 5px;    position: relative;    width: 200px;  }  .fl {    float: left;  }  {    color: #0254eb  }  a:visited {    color: #0254eb  }  a.morelink {    text-decoration: none;    outline: none;  }  .morecontent span {    display: none;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="speaker_content" class="visible-desktop">    <div id="row1">      <div class="speaker_content_text_alt   fl">        <a name=""></a>        <div class="speaker_name">          <p style=" font-size:25px; padding top: 10px; ">ironman            <br/>          </p>        </div>        <div class="spk_desc row1">          <p style="line-height:19px;" class="comment more1">i´ve create template meteor.js, want apply jquery effect onclick event on tran_button, idea effect div associated button disappear. don´t error through meteor console, or firebug console.            has written apps iphone , ipad since sdks first appeared , has written programs mac way system 7.            <br>daniel presents iphone, cocoa, , swift training , consults through company host of , available on editors cut website.</p>        </div>      </div>      <div class="speaker_content_text   fl">        <a name=""></a>        <div class="speaker_name">          <p style="font-size:25px;padding-top:10px; ">            supeeer man            <br/>          </p>        </div>        <div class="spk_desc row1">          <p style="line-height:19px;" class="comment more2">            understand privilege earned gaining 2,000 reputation on site. far can see, requirement - there doesn't seem restrictions on rep from. instance, got mine through            answers , few questions - think may have made 1 suggested edit before gaining privilege allows me edit anything, without peer review..            <br>please note - i'm not trying suggest there roving bands of 2k users rampantly defiling posts left , right; rather more focussed on introducing learning curve edits, rather allowing users may have no idea            how edit post edit anything.          </p>        </div>      </div>      </div>  </div>