"read more" Funktion

Backjump · 10/19/2013, 23:05

Moin, ich bin bin gerade dabei meine Homepage wieder aufzubauen und zwar gibt es die Funktion wenn man einen Text hat der länger ist gecuttet wird und denn durch den Buttom "read more" nach unten fährt und den vollständigen Text anzeigt.

Wie macht man das ist das im html oder php möglich oder braucht man nen Java script.
Konnte im Quelltext nur dies finden

PHP Code:



<p style="padding-top: 10px;"> 
<a class="read-more-a" href="#"> 
<span class="read-more">read more</span> 
</a> 
</p>

~~Supschta~~ · 10/20/2013, 00:36

Würde dir dafür einfach jQuery Toggle empfehlen.

Synatex · 10/20/2013, 09:54

Frage ist, ob der Content beim Klick komplett angezeigt werden sollte oder auf externe Links verweisen soll wie beispielsweise bei Wordpress. Für die erste Lösung hat mein Vorposter dir eine Lösung gesagt, für die zweite kannst du den String einfach bei X zeichen mit str_split splitten.

Backjump · 10/20/2013, 11:18

Quote:

Originally Posted by Synatex

Frage ist, ob der Content beim Klick komplett angezeigt werden sollte oder auf externe Links verweisen soll wie beispielsweise bei Wordpress. Für die erste Lösung hat mein Vorposter dir eine Lösung gesagt, für die zweite kannst du den String einfach bei X zeichen mit str_split splitten.

Ne, eine neue Seite soll nicht aufgemacht werden einfach nur den Text erweitern. Könntest du mir vileleicht ne kleine Vorlage erstellen?

tolio · 10/20/2013, 11:56

jquery kann sowas sehr gut, dann entweder den verbleibende text nachladen oder einfach aus nem anderen element nehmen welches nicht sichtbar ist

NotEnoughForYou · 10/20/2013, 12:15

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.text .all').click(function() {
		$(this).prev().css('white-space', 'normal');
	});
});
</script>
<style>
.text p {
    text-overflow: ellipsis; 
    width: 670px; 
    white-space: nowrap; 
    overflow:hidden; 
}
</style>
</head>

<body>
<div class="text">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer</p>
<div class="all">Zeig alles</div>
</div>
</body>
</html>

Backjump · 10/21/2013, 13:42

Danke schon mal aber wie baue ich das denn nun in meine Seite ein mit nem "Bild" bzw. hinterlegeten Text bei meinem readmore Knopf? Zudem geht das doch denn nur einmal und man kann es nicht wieder zurück klicken oder? Das er den Text nur wieder verschwinden lässt.