[HTML] "MEHR" Button um Text aufzuklappen

[Isamani]

Heyo,

ich suche nach einer Möglichkeit per Button einen Text zu erweitern bzw aufzuklappen, ich hab mehrere Texte die unterschiedlich groß sind und somit das Layout kaputt machen.

Meine Idee ist das ich die Texte gleich groß darstelle und man die möglichkeit hat mit einem "Mehr" Button den restlichen Text aufzuklappen.

Leider bin ich noch frisch im Web Development und kann nur mit html css und bootstrap umgehen

Hier ein screen vom Code und wie es ca. aussehen soll

[Natsu Dragneel]

Originally Posted by Isamani

Heyo,

ich suche nach einer Möglichkeit per Button einen Text zu erweitern bzw aufzuklappen, ich hab mehrere Texte die unterschiedlich groß sind und somit das Layout kaputt machen.

Meine Idee ist das ich die Texte gleich groß darstelle und man die möglichkeit hat mit einem "Mehr" Button den restlichen Text aufzuklappen.

Leider bin ich noch frisch im Web Development und kann nur mit html css und bootstrap umgehen

Hier ein screen vom Code und wie es ca. aussehen soll

<a href="#" onclick="document.getElementById('mehrtexthier').style.display='block';return false;">Lese mehr</a>
<div id="mehrtexthier" style="display:none">Dein mehr text hier</div>

Versuchs mal so.

[404 Not Found]

Es gibt sehr viele Arten wie man das umsetzen kann
Ich würde den Button aus der <div class="card........"> raus nehmen und der div eine max-height geben.
Dann musst du diese max-height über javascript entfernen sobald du auf den button klickst.

Das ist nur eine von vielen Möglichkeiten wie du das umsetzen kannst

[iMostLiked]

Nur mit HTML und CSS bekommst du das nicht gelöst mit dem Auf-/Einklappen. Da brauchst du schon JavaScript für.

Ein weiterer Ansatz, wenn du kein JS nutzen möchtest, wäre mit einer Scrollbar innerhalb des Containers zu arbeiten.