"read more" button

[enjoyHB]

Hallo liebe Community,
ich komme bei einem, für viele von euch sehr einfachen, Problem nicht weiter.

Ich möchte ein simples onclick event schalten bei dem sich ein Text ausklappt. Ein klassischer "read more" button also Der Text der ausklappt soll durch einen transition Effekt "aufklappen".

Mein Lösungsansatz:

<p id="more-open" style="display:none; transition:display 2s">Viel Text.</p>
<p onclick="document.getElementById('more-open').style.display='block'">Mehr lesen</p>

Das Anzeigen funktioniert so ohne Probleme. Der transition Befehl ist nur das Problem. Ich habe gelesen das transition nicht mit display funktioniert - sehr schade, warum eigentlich nicht?

Deshalb bin ich zu dem folgenden alternativen Lösungsweg gekommen:

<p id="more-open" style="opacity:0; transition:opacity 2s">Viel Text.</p>
<p onclick="document.getElementById('more-open').style.opacity='1'">Mehr lesen</p>

Funktioniert! Aber das Problem wird euch schon aufgefallen sein. Der Text "Viel Text" nimmt jetzt schon Platz ein, obwohl dieser eben wie bei der display:none Eigenschaft nicht berücksichtigt werden soll, solange dieser nicht sichtbar ist. "Visibility:hidden" zu benutzen ist auch keine Alternative - gleiches Problem wie bei "opacity".

Wie könnte ich dieses Problem noch lösen? Angemerkt ich lerne derzeit noch Javascript und bin "Anfänger" - gebe aber mein bestes .

Ich hoffe ich konnte das Problem gut beschreiben, ich werde gerne auf Nachfragen eingehen und das Problem genauer beschreiben, falls nötig.

Danke,
LG

 

[Gelöschtes Mitglied 633957]

Persönlich mag ich die Readmore.js von Jed Foster:

• Blog-Beitrag (Autor)
• Readmore.js Download (GitHub)

 

[cebito]

Versuchs mal mit "height:0; overflow:hidden;" und dann nach Klick "height:auto;" (so ungeprüft aus dem Bauch raus, sollte aber funktionieren)

 

[enjoyHB]

Hey,
danke für eure Antworten! Die Lösung von cebito funktioniert einwandfrei!

<p id ="y" onclick="document.getElementById('more-open').style.height='auto'">Mehr lesen</p>
<p id="more-open">Viel Text.Viel Text.Viel Text.</p>

#more-open {
  height:0;
  overflow: hidden;
    -webkit-transition: height 300ms ease-out;
    -moz-transition: height 300ms ease-out;
    -o-transition: height 300ms ease-out;
    -ms-transition: height 300ms ease-out;
    transition: height 300ms ease-out;
}

Danke erst einmal!
Jetzt ist das zweite Problem das smoothe aufklappen. Auch wenn ich den height nun durch einen transition tag verzögert habe, funktioniert dies leider nicht. Ich habe keinen Anhaltspunkt warum nicht, habt ihr Ideen?

 

[cebito]

Versuch mal max-height, der Gegenpart wäre dann "max-height: none;"