Mehr anzeigen Weniger anzeigen mit JQuery

Question

Ich möchte mit JQuery mehr/weniger anzeigen. Ich habe ein paar Beispiele von Googeln versucht, aber beide funktionieren nicht. Nichts Besonderes, ich brauche nur einen Textabschnitt, der auf eine bestimmte Höhe zugeschnitten ist, und einen Link, der zusätzlichen Text erweitert/versteckt.

Answer 1

Dies sollte die Darstellung des vollen div umschalten, indem Sie die aktuelle div klicken, können Sie das Click-Ereignis zu jedem Auslöser Sie möchten hinzufügen.

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

weniger Anzeigen mit Javascript wird zunächst nicht die div auf unbestimmte Zeit für die Benutzer verbergen w/o Javascript aktiviert.

Answer 2

nicht getestet, aber sollte funktionieren:

<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

Schnell und schmutzig Beispiel:

<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

Meine Lösung ist ein bisschen anders.

Die Logik besteht darin, den Längeninhalt in zwei Teile zu zerlegen und den zweiten auszublenden. Der zweite Abschnitt wird mit dem Link "Zeige mehr" angezeigt. Sie können vollständige Details hier finden, http://danishsultan.blogspot.com/2012/03/adding-show-less-show-more-feature.html.

Answer 5

Sie können jQuery mehr oder weniger verwenden. Sie können ohne Spleißen html Inhalt des Textes

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

es mehr oder weniger fügt eine demo hier

Answer 6

Verwendung dieses Plugin sehen.