Erweitern Sie einen div, die eine Vorschau des Inhalts mit JQuery hat

Question

Ich habe 5 Zeilen Text angezeigt werden, untereinander in etwa so:

1) Zeile eine
2) Linie zwei
3) Zeile drei
4) Zeile vier
5) Zeile fünf

aber mit einer besonderen Anforderung nur die ersten zwei Zeilen anzeigt, und eine Art von jquery Magie, die sie Linien 3-> 5 und angezeigt verstecken würde, wenn die Benutzer klickt auf den Abwärtspfeil oder ein ähnliches Steuerelement. Wie kann ich das machen?

Danke

Answer 1

Sie brauchen etwas wie folgt aus: HTML:

<ul> 
    <li class="line">Line one</li> 
    <li class="line">Line two</li> 
    <li class="line">Line three</li> 
    <li class="line">Line four</li> 
    <li class="line">Line five</li> 
    <li class="showMore">Show More</li> 
</ul> 

CSS:

.line:nth-child(n+3) { 
    display:none; 
} 
.showMore{ 
    cursor:pointer; 
    font-size:12px; 
    color:blue; 
} 

JQuery:

$(document).ready(function() { 
    $('.showMore').click(function() { 
     $('ul li:gt(1)').show(); 
     $(this).hide(); 
    }); 
}); 

Answer 2

Hier können Sie auf 2 Arten tun. 1 zeigen Sie einfach 2 Zeilen und einen Trigger "mehr" beim Klicken auf Mehr, Rest der 3 Zeilen mit jquery laden und alle 5 anzeigen.

2 - alle 5 drucken, aber die Höhe der div um nur 2. auf Klicken Sie auf mehr ändern Höhe wie von 25px zu 100px.