Die Option, Text nach unten hin auszublenden mit der Funktion "weiter lesen..." 
Autor: Malte S.Hallo Zusammen,
auf meiner Page im Bereich https://www.weiselstube.de/die-imkerei.html oder https://www.weiselstube.de/bienen-patenschaften.html habe ich recht viel Text, der thematisch in Bereich zusammen gefasst ist.
Kommt man auf die Seite wird man erst einmal vom Text erschlagen, dar echt viel.
Ich würde gerne die Möglichkeit haben die Textfelder so zu gestallten, dass erst einmal nur die obersten 3 oder 4 Zeilen zu lesen sind und die danach kommende Zeile langsam transparent wird. Darunter wird der Schriftzug "zum weiterlesen hier klicken" oder so angezeigt. Klickt man dort drauf wird der Text nach unten ausgeklappt und kann vollumfänglich gelesen werden. Die Möglichkeit des wieder einklappens sollte auch gegeben sein.
Ich hoffe, ich habe mich verständlich ausgedrückt.
Falls nicht, diese Funktion wird hier von dem Forum bei langen Antworten zB unterstützt.
Vielen Dank und noch einen schönen Tag,
Malte
Hallo Malte,
teil doch deinen Text etwas auf und benutze das Objekt Accordion Text das passt sehr gut zu diesem Problem.
Gruß
Andreas
Autor
Hallo Andreas und danke für den Hinweis,
schade, dass das Objekt etwas kostet (hatte beim Kauf der Software eigentlich gehofft, dass keine weiteren Kosten auf mich zu kommen).
Die Beispielpage klappt leider nicht richtig, zumindest wird daraus für mich nicht ersichtlich, wie da ganze aussehen könnte.... Ah, mit Firefox geht die Seite, mit Chrome nicht.
Nichts ist umsonst....manchmal aber doch
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
</body>
</html>
Pack das mal in einem html-Objekt rein
Gruß
Andreas
Funktioniert einwandfrei.
Soweit ich weiß wird "versteckter Content" aber von Google & Co. nicht erkannt und führt sogar zu einem schlechteren Ranking.
Hallo Karl, Google crawlt das mit, kein Problem... & zudem kannst Du noch Überschrifte Tag's hinzufügen.
Genau, dies Anweisung <h3>Section 1</h3> ziehen die Crawler + Text Inhalt.
Autor
Ach wie kool dankeschön ...
Jetzt muss ich damit noch eni wenig rum spielen, dass die Farben stimmen und, dass, wenn man auf die Seite kommt, die zweite Section standardmäßig offen ist. Weil wenn die erste offen ist, ist diese bereits schon so lang, dass man zur 2. scrollen muss ...
Aber dankeschön!!
Vielleicht kommt das ja noch mit diesem fade out, dann sind standardmäßig alle Text nur zu einem von mir definierten Teil lesbar und für den Rest muss man dann auf den Button klicken.
Autor
bzgl rum basteln: https://jqueryui.com/themeroller/ hat mir sehr geholfen!!