Show more less with JQuery

Question

JQueryを使用してmore/lessを表示したいです。私はグーグルでいくつかの例を試しましたが、どちらもうまくいきませんでした。空想はありません、私は特定の高さにカットするテキストの段落を必要とし、リンクは追加のテキストを展開/非表示にします。

Answer 1

、あなたが望む任意のトリガーにクリックイベントを追加することができます。

HTML：

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

Javascriptを：JavaScriptを使用して少ない表示

$('#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); 
    } 
}); 

は当初、W/OのJavaScriptが有効なユーザーのために無期限のdivを隠しません。

Answer 2

テストされていないが、動作するはずです：これは、実際のdiv要素をクリックすることで、完全なdiv要素の上映を切り替える必要があります

<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); 
     } 
    } 

ロジックは、長さの内容を2つの部分に分割し、2番目の部分を隠すことです。 2番目のセクションは '詳細を表示'リンクを使用して表示されます。完全な詳細はhttp://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.htmlです。

Answer 5

jQueryを多かれ少なかれ使用できます。あなたはそれがテキストのスプライシングHTMLコンテンツなし多かれ少なかれを追加し、このプラグイン

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

ここdemo

Answer 6

使用を見ることができます。