"MEHR" Button um Text aufzuklappen

03/16/2020 15:39 Isamani#1
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

[Only registered and activated users can see links. Click Here To Register...]
03/16/2020 15:43 Natsu Dragneel#2
Quote:
Originally Posted by Isamani View Post
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

[Only registered and activated users can see links. Click Here To Register...]
HTML Code:
<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.
03/16/2020 15:45 404 Not Found#3
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 :D
03/16/2020 17:48 iMostLiked#4
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.

[Only registered and activated users can see links. Click Here To Register...]