더 적은 JQuery로보기 더보기

Question

JQuery를 사용하여 more/less를 보여주고 싶습니다. 나는 Google 검색으로 몇 가지 예를 시도했지만 어느 것도 작동하지 않습니다. 공상적인 것은 없으며, 텍스트 단락이 특정 높이로 자르기 만하면되고, 링크는 추가 텍스트를 확장/숨길 것입니다.

Answer 1

이 실제 DIV를 클릭하여 전체 사업부의 전시를 전환해야합니다, 당신은 당신이 원하는 트리거에 클릭 이벤트를 추가 할 수 있습니다.

HTML :

<div id="blah"> 
    Long...Content 
</div> 

자바 스크립트 :

$('#blah').css({height:'20px', overflow:'hidden'}); 
$('#blah').on('click', function() { 
    var $this = $(this); 
    if ($this.data('open')) { 
     $this.animate({height:'20px'}); 
     $this.data('open', 0); 

    } 
    else { 
     $this.animate({height:'100%'}); 
     $this.data('open', 1); 
    } 
}); 

처음에 자바 스크립트와 덜보기 자바 스크립트 O를 활성화 승/사용자를위한 무기한 사업부를 숨길 수 없습니다.

Answer 2

검증되지 않은,하지만 작동합니다은 :

<div style="height:500px;overflow:hidden" id="blah"> 
Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello.Hello Hello Hello. 
</div> 
<a href="#" id="showmore">Show more</a> 
<script> 
$("#showmore").live('click', function() { 
    $("#blah").css('height','1000px'); 

}); 
</script> 

Answer 3

신속하고 더러운 샘플 :

<style> 
.collapsed {height:50px; overflow:hidden} 
</style> 

<script> 
$(function() { 
    $(".expander").click(function() { $("div").toggleClass("collapsed"); }); 
}) 
</script> 
<div class="collapsed">LOTS AND LOTS OF TEXT LOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXTLOTS AND LOTS OF TEXT</div> 
<span class="expander">Expand/Collapse</span> 

Answer 4

내 솔루션은 조금 다르다.

function SetMoreLess(para, thrLength, tolerance, moreText, lessText) { 
     var alltext = $(para).html().trim(); 

     if (alltext.length + tolerance < thrLength) { 
      return; 
     } 
     else { 
      var firstHalf = alltext.substring(0, thrLength); 
      var secondHalf = alltext.substring(thrLength, alltext.length); 

      var firstHalfSpan = '<span class="firstHalf">' + firstHalf + '</span>'; 
      var secondHalfSpan = '<span class="secondHalf">' + secondHalf + '</span>'; 
      var moreTextA = '<a class="moreText">' + moreText + '</a>'; 
      var lessTextA = '<a class="lessText">' + lessText + '</a>'; 

      var newHtml = firstHalfSpan + moreTextA + secondHalfSpan + lessTextA; 

      $(para).html(newHtml); 
     } 
    } 

논리는 길이 내용을 두 조각으로 나누고 두 번째 조각을 숨기는 것입니다. 두 번째 섹션은 '더보기'링크를 사용하여 표시됩니다. 자세한 내용은 http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html에서 확인할 수 있습니다.

Answer 5

더 많거나 적게 jQuery를 사용할 수 있습니다. 당신은 demo 여기

Answer 6

사용에게 텍스트의 접합 HTML 콘텐츠없이 그것은 더 많거나 적은 추가이 플러그인

http://plugins.learningjquery.com/expander/index.html

을 볼 수 있습니다.