Aufklappen von Text 
Autor: Michael G.
Besucht 3368,
Followers 1,
Geteilt 0
Hallo,
ich brauche mal einen Tipp.
Ich habe mehrer Textobjekte und etwas viel Text darin.
Kann man nur wenig Text anzeigen lassen und dann ein Button oder Link "mehr" und dann erscheint der restliche Text darunter?
Gepostet am
Es gibt ein Zusatzobjekt, das dies möglich macht. Schau mal hier https://market.websitex5.com/de/objekte/vorschau/2d895af3-1219-4106-b1ab-3283c1cac41
Du kannst aber auch selbst HTML-Code in das Text-Objekt eintragen, der das Verhalten realisiert. Eine Beschreibung findest Du unter https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details
Hier eine Veranschaulichung, Texte mit einem Link zu anderen Texten:
https://watelet.ch/verlinkungen-test.html
ausgeführt mit Accordion Text.
Falls das von Intresse ist sagen, ich helfe dann gerne weiter.
Autor
Ich meine nicht das Accordion.
Beispiel:
Man schreibt einen Text es werden 5 Sätze gezeigt, dann kommt ein Link "Mehr lesen"
dann klappt der restliche Text darunter auf, so das man alles komplett lesen kann
Das ist das Collaps Prinzip, aber da ist viel mit HTML, CSS und JAVA
Folgende Lösung ohne Java funktioniert bei mir gut:
Du benötigst dafür ein Text-Objekt und ein HTML-Objekt.
Den Anfangstext schreibst Du in das Text-Objekt.
Im HTML-Objekt trägst Du im Reiter "Erweitert" folgenden Code ein:
.klappText input {
/* Ermöglicht Ansteuerung über Tastatur (HTab) */
opacity: 0;
margin-left: 0.5em;
}
.klappText label {
margin-left: -1.90em;
color: #910e16;
cursor: pointer;
font-family:Arial;
text-align:justify;
}
.klappText input + label:before {
content: 'mehr Text anzeigen';
}
.klappText input:checked + label:before {
content: 'weniger Text anzeigen';
}
.klappText input:not(:checked) ~ div {
display: none;
}
.klappText input:focus + label {
/* Markierung des fokussierten LABEL-Elements */
background-color: #910e16;
color: white;
}
Und im Reiter HTML-Code wird folgendes eingetragen:
<!-- Textformatierung (kann verändert oder weggelassen werden) -->
<div style="height:auto;width:auto;background-color:#F0F0F0;font-family:Arial;font-size:1.0em;
font-style:normal;font-weight:normal;line-height:20px;border:1px solid #F0F0F0;text-align:left;">
<div class="klappText">
<input id="inputID-1" type="checkbox" />
<label for="inputID-1"></label>
Ab hier kann dann ganz viel Text stehen, der ausgeklappt oder wieder eingeklappt werden kann
</div>
</div>
Ich hoffe, Du kommst damit klar.
Autor
Soweit habe ich das verstanden wo der Code hinkommt, aber wo kommt das Html Objekt hin?
der Link "Mehr lesen" muss doch direkt in das Textobjekt damit der Kunde drauf klicken kann und dann klappt der ganze Text auf und schiebt alles weitere nach unten
... EXTRA...
>> Methode HTML >> <details><summary>
>> mein exklusives Beispiel
... JS-Methode; >> meine exklusive Erfindung ...
...
... der Code ist klar ...
... drücke Strg + U, (Ctrl+U), ...um es anzusehen, aufzuheben und zu studieren ...
.
(+ EXTRA: accordion1, accordion2, accordion3, etc., etc., ...)
.
Autor
... JS-Methode; >> meine exklusive Erfindung ...
Das kommt der Sache schon nah.
Den Code sehe ich auch durch Strg+U aber wo füge ich den ein und wo kommt der Text hin?
Autor
Ich habe mal was gefunden
<div class="mw-collapsible mw-collapsed" style="width:100%">
Dieser Text ist nicht einklappbar, aber der Nächste ist einklappbar und standardmäßig versteckt:
<div class="mw-collapsible-content">Dieser Text sollte standardmäßig versteckt sein.</div>
Wo kommt das hin? vor dem /Head?
Bei meiner Lösung kommt der Starttext in ein Text-Objekt. Direkt unter diesem platzierst Du das HTML-Objekt mit dem Rest Text und dem Style. Die Ränder der Objekte musst Du so anpassen, dass kein Zwischenraum zwischen den beiden Objekten ist. Dann sieht es wie ein Text aus. Probier es mal aus, es klappt.
Leider habe ich im Moment keinen PC und kann deshalb kein Beispiel zeigen.
Hallo Michael G.
Meinst Du so was wie hier https://08152019.de . Geht aber nur im html-Feld, nicht mit Textfeldern usw.
In der Ansicht kleiner 600px sind auch deine Buttons, wo ich dir hier ja schon eine Anleitung geschrieben hatte. Einfach mal die Anleitungen richtig durchgehen und bei Fragen sich selber mal belesen, in Büchern oder im Netz.
So sieht bei meiner Lösung der Seizenaufbau aus:
Der untere Außenrand des Text-Objekts ist mit dem Button "Ränder" auf 0 zu setzen
Analog der obere Außenrand des HTML-Objekt ebenfalls auf 0 setzen. Das Ergebnis der Anzeige ist wie folgt:
und ausgeklappt:
Den Hinweis "mehr Text anzeigen" erscheint aus den Einstellungen im HTML-Objekt. Oben habe ich aus Versehen unvollständigen Code für den Reiter "HTML-Code" des HTML-Objekts angegeben; hier jetzt der richtige
<!-- Textformatierung (kann verändert oder weggelassen werden) -->
<div style="height:auto;width:auto;background-color:#F0F0F0;font-family:Arial;font-size:1.0em;
font-style:normal;font-weight:normal;line-height:20px;border:1px solid #F0F0F0;text-align:left;">
<div class="klappText">
<input id="inputID-1" type="checkbox" />
<label for="inputID-1"></label>
<div>
<br />
Ab hier kann dann ganz viel Text stehen, der ausgeklappt oder wieder eingeklappt werden kann
<br />
<br />
Ende des Textes
<br />
</div>
</div>
</div>
Ich habe ein Beispiel hier : http://www.calendarforum.dk/restaurant/about-the-staff.html
Ist gemacht in Ver. 12 - aber will in alle Versionen funktionieren.
Is es so was ähnlich?
(It > Dk) ... ... flot eksempel, men vær forsigtig, i EKSTRA koder må du ikke bruge disse TAG'er (unik reserveret), som kan oprette en fejl på siden::
<HTML></HTML> <HEAD></HEAD> <BODY></BODY>
ciao
.
Ist das nur mit WX5-Bordmitteln oder mit zuzätzlichem Gode gemacht?
Hier ein grafisch ausbaufähiges Beispiel mit WX5-Bordmitteln (Text- und Accordion-Objekt).
http://kaguca.bplaced.net/?utm_source=software&utm_medium=Pro_2019.3
Es ist mit ein Image-object und unter das Bild/Image ein html-object mit Code gemacht.
Wie lautet der Code oder ist der geheim?
Kannst Du doch selbst nachschauen auf der Seite... Strg+U und dann siehst Du den Quelltext und musst nur noch die passende Stelle suchen.
Ist nicht geheim - ich will morgen die Projekt aufdatieren mit ein seite wo ich die Code zeigen.
Auf dieser Seite : http://eksempelsite.dk/sparta02/bullet-list---kopier4.html#Anchor04
findet Sie die Layout ind die Code.
Die seite ist nur für Test - Ich weiss nicht wie lange es will eksistieren.
Mach das doch mit dem Accordion Objekt und gut ist. Karl B. hat ja ein Beispiel aufgezeigt.
Ich kann ja verstehen das man versucht mehr und noch mehr Effekte in eine Homepage reinzupacken, aber ich sehe die Sache ein wenig skeptisch, wenn viel Skripte, Codes (auch Fremdcode) eingefügt werden. Generell sollte man den Nutzen für den User hinterfragen. Meine Meinung ist, man sollte so wenig wie möglich Scripte oder sonstigen Schnickschnack einfügen, um die Performance der Seite nicht zu Negativ zu beeinflussen.
Ist zwar nur ein Aspekt aber dennoch wichtig - Mobil-PageSpeed Test von Google:
Zum Vergleich meine Seite:
Die code Ich zeige/benutze ist sehr minimal. Es hat KEIN bedeutung für Performance - weniger als der Accordion.
Ich meinte nicht nur den Code zum Textaufklappen, sondern generell die Überlegung, auf unnütze Sachen - die eigentlich keinen Mehrwert für den User bringen - zu verzichten. Aber wie gesagt, dass ist meine Meinung und jeder kann dies Handhaben wie er möchte.
Die Seite haben 3 Gallerie-Objekte und 6 Bilder/Images - Trotzdem ist er auf 78.
Ohne Gallerien und Bilder - nur mit die Texte - wäre es auf 100.
Du brauchst dich für deine Seite doch nicht rechtfertigen, alles in Ordnung. Es sollte von mir nur ein Denkanstoss sein - mehr nicht.
Alles gut
Ich hoffe es ist verwendbar für Michael und andere.
Autor
Ja danke John, das war sehr hilfreich. Ich weiß nicht was man von solchen Tests halten soll.
Wie Martin H. User schon schrieb:
Mach das doch mit dem Accordion Objekt und gut ist. Karl B. hat ja ein Beispiel aufgezeigt.
Ich kann ja verstehen das man versucht mehr und noch mehr Effekte in eine Homepage reinzupacken, aber ich sehe die Sache ein wenig skeptisch, wenn viel Skripte, Codes (auch Fremdcode) eingefügt werden. Generell sollte man den Nutzen für den User hinterfragen. Meine Meinung ist, man sollte so wenig wie möglich Scripte oder sonstigen Schnickschnack einfügen, um die Performance der Seite nicht zu Negativ zu beeinflussen.
Ich bin der selben Meinung, je weniger PlugIns um so besser die Performance. Dies wird in vielen Artikeln im Netz auch beschrieben. Je mehr PlugIns um so mehr JS und CSS was geladen werden muss und das heißt Speed einbuße.
WENIGER ist oft MEHR
Ich hoffe alles hier wissen dass Jeder Objekte im projekt viel extra code bedeuten. Manchmal viel mehr als ein kleines stück "extra" code.