Hattest du das nicht schon mal 2023 gefragt?

https://andreweb.nl/x5_test/read-more.html

https://helpcenter.websitex5.com/es/post/260368

Man kann auch das Objekt "HTML Code" verwenden und einfachen HTML- und CSS-Code.

Testseite >> https://findelinks.de/123test-aufklappmenue-2/aufklapptext-html-css.html

.

----- Objekt "HTML Code" -----

HTML-Code:

<details>
<summary>Kurztext 1 ...</summary>
Ausführlicher Text. Ausführlicher Text. Ausführlicher Text. Ausführlicher Text.
</details>
<br>
<details>
<summary>Kurztext 2 ...</summary>
Ausführlicher Text. Ausführlicher Text. Ausführlicher Text. Ausführlicher Text.
</details>
<br>
<details>
<summary>Kurztext 3 ...</summary>
Ausführlicher Text. Ausführlicher Text. Ausführlicher Text. Ausführlicher Text.
</details>

Erweitert:

details {text-align: left; font-weight: normal;}
summary {text-align: left; font-weight: bold;}

------------------------------------

Es gibt auch umfangreichere Codes im Internet, aber es reicht auch dieser Code.

Variante:

<details>
<summary><b>Überschrift</b><br>Kurztext <b>Weiterlesen ...</b></summary>
Ausführlicher Test. Ausführlicher Test. Ausführlicher Test. Ausführlicher Test. Ausführlicher Test. 
</details>
<br>

----- Vorher ----

----- Nach dem Klick -----

-----------------

Ansonsten das kostenpflichtige Objekt "Accordion Text & FAQ" verwenden, siehe

>> https://market.websitex5.com/de/objekte/3cfb4af5-aedd-43b3-ad77-1bb2392e5cd

Hallo Andreas

Ja , das weiß ich, ABER ich dachte an eine andere Lösung, denn da ist immer zu achten wegen den Buchstaben, wieviel da sind bis zu "mehr"...

Danke- genau so in der Art.

Muss noch die schriftgröße. Art unterbringen, und eventuell den Pfeil weg...

Danke

Wie kann ich noch den title in einer anderen schriftart einstellen?

Hab da nur summary und details.

Ich würde eine Überschrift brauchen?In einer anderen Schriftart, aber das ist dann die font familie

Hier der geänderte CSS-Code, damit ist das Dreieck weg und es können Schriftart und -größe sowie fett und normal eingestellt werden.

Die einzelnen Abschnitte des CSS-Codes:

   A) Summary ist der Titel bzw. die Überschrift.

   B) Summary::Marker wäre das Dreieck, das durch content: "" nicht angezeigt wird.

   C) Details der aufklappende Text.

----- CSS-Code -----

summary {
text-align: left;
font-family: "Century Gothic";
font-size: 20px;
font-weight: bold;
}

summary::marker {
content: "";
}

details {
text-align: left;
font-family: "Century Gothic";
font-size 12px;
font-weight: normal;
}

----- Screenshot -----

Spitze, danke.

Noch eine Frage...

Ich möchte gerne nur ein oder zwei Wörter als Titel haben. Dies gsößer, und, oder fett. Dann den Text normale schrift, bis zum "weiterlesen- also, die gleiche Schrift wie beim aufgeklappten.???

Ich versuche das als summarytitle...extra im css..moment...

Komme nicht zusammen, leider zu dumm dafür...Oder denke zu kompliziert...

Schön wäre so zum Beispiel:

Überschrift- 25px in Schriftart a

Darunter dann der Text bis zu "weiterlesen" in Schriftart b in 14 px

Nach dem aufklappen das gleich wie bis zum weiterlesen...das der Text gleich ist wie vor dem weiterlesen, und nur der Titel, das sind ein zwei Würter anders sind...

Testseite ist die Gleiche - evtl. Taste F5 drücken, damit die Seite neu aufgerufen wird.

Evtl. können die CSS-Experten bei weiteren Wünschen helfen.

>> Ich gehe in etwa 15 Minuten offline <<

.

Hier der geänderte HTML- und CSS-Code

----- HTML-Code (für jeden Abschnitt diesen Code) ----

<details>
<summary>
<h4>Titel 1</h4>
Text 1a - et 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. 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. <div class="weiterlesen">Weiterlesen ...</div>
</summary>
Text 1b - 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. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</details>
<br>

----- CSS-Code (nur einmal diesen Code) -----

summary {
text-align: left;
font-family: "Tahoma";
font-size: 14px;
font-weight: normal;
}

summary::marker {
content: "";
}

details {
text-align: left;
font-family: "Tahoma";
font-size: 14px;
font-weight: normal;
}

h4 {
text-align: left;
font-family: "Times New Roman";
font-size: 24px;
font-weight: bold;
}

.weiterlesen {
font-family: "Tahoma";
font-size: 12px;
font-weight: bold;
font-style: italic;
}

Leerzeilen mit <br> (Zeilenumbruch) - siehe

<br><br> <div class="weiterlesen">Weiterlesen ...</div><br>

----- HTML-Code -----

<details>
<summary>
<h4>Titel 1</h4>
Text 1a - et 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. 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.<br><br> <div class="weiterlesen">Weiterlesen ...</div><br>
</summary>
Text 1b - 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. Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</details>
<br>

DANKE!!!!!

So komme ich nun weiter, recht herzlichen Dank.

Hier noch der CSS-Code für die Textfarbe:

color: white;

Danke für Deine tolle Hilfe Daniel

Trotzdem habe ich es nun anders gelöst...Anstatt "weiterlesen" einen schönen Button gemacht mit "mehr erfahren"...

Da kann ich Bilder, texte formatieren ganz einfach... Gregor gefällt es nun auch so besser.

Da es ja egal ist, ob ich auf weiterlesen klicke oder auf den button...

ABER D A N K E

Hier zum nachsehen www.dergoldschmied.at

Bei FAQ wurde jetzt das Objekt "Accordion Text & FAQ" verwendet, also etwas Geld investiert.

Ja, das hat aber mit dem von Dir nichts zu tun.

Auf der Startseite wäre es nötig gewesen, bei Gregor, dann bei Mokume gane... Wegen dem langen Texten...

Aber danke.