Показать больше с JQuery

Question

Я хочу показать больше/меньше с помощью JQuery. Я попробовал пару примеров от Google, но не работал. Ничего необычного, мне просто нужен абзац текста, который нужно отрезать до определенной высоты, а ссылка будет расширять/скрывать дополнительный текст.

Answer 1

Это должно переключать показ полного DIV нажав фактического DIV, вы можете добавить событие щелчка на любой триггер вы хотите.

HTML:

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

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

Показаны менее с JavaScript изначально не скрыть DIV до бесконечности для пользователей без JavaScript включен.

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

Используйте этот плагин

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

Это добавляет более или менее без сращивания HTML содержания текста.