Text in selbsterstellter Box auf- und einklappen

  • Affected Version
    WoltLab Suite 5.2

    Ich habe eine Idee, die ich aber nicht umgesetzt kriege.


    Es gibt eine Box die ich selber erstellt habe. In der Box soll in der ersten Zeile eine Satz stehen und daneben ein Link auf "Weiterlesen". Wenn man da drauf klickt sollen sich die nächsten Sätze unter dem ersten Satz aufklappen und per Klick auf ein "X" oder "Schließen" wieder schließen.


    Hat da Jemand eine Idee, wie ich das hin kriege?

  • Käme da eventuell einfach ein Spoiler in Betracht?





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Mhhhh???? Sieht nicht so gut aus. Aber ich habe vielleicht auch zu schnell hier meine Frage eingestellt.


    Ich lese mich da aktuell in CSS ein. Geht wohl mit den Elementen "details" und "summary".


    Melde mich später mal, wie es geklappt hat, oder wo es noch zwickt.

  • OK, das scheint der richtige Weg zu sein. Ich bin am Feinschliff.


    Ich möchte eine andere Farbe, bsp. #ff0000 wenn ich über die Links "Weiter lesen!" und "(X) Schließen!" gehe.


    Aktuell ist der Code vom CSS:

    Habe da jetzt über nee Stunde im Internet gesucht, aber ich kriege es nicht hin, dass sich bei Hover die Farbe verändert.

  • Kann man sich das schon ansehen?





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Nicht ganz, aber fast:


    CSS
    summary:hover {color:rgba(81, 88, 97, 1);}
    summary:hover:after {color:red;}





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Puhhh, da wäre ich nie drauf gekommen. Tausend Dank. Habe jetzt noch die Farben angepasst und die Box final eingebaut.


    Zudem habe ich noch eine Trennlinie ober- und unterhalb des aufgeklappten Textes eingebaut.


    Ich finde es für meinen Geschmack gelungen.

  • Das "Weiterlesen" über dem Einleitungstext finde ich verwirrend.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Das "Weiterlesen" über dem Einleitungstext finde ich verwirrend.

    Könnte stimmen. Ich teste das nachher mal aus.


    Danke. Werde ich wie gesagt alles nachher mal testen. Auch die Variante aus Deinem letzten Posting.

  • Lass es mal wie es ist und füge zusätzlich folgendes CSS ein: details[open] summary:after {position:relative; top: 570px;}.


    Mir gefällt das so richtig gut.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Lass es mal wie es ist und füge zusätzlich folgendes CSS ein: details[open] summary:after {position:relative; top: 570px;}.

    So, alle Varianten durch. Die von norse gefällt mir am Besten. Habe aus 570 px, 575 px gemacht.


    Ist halt Geschmackssache. Aber ich denke da immer an den Benutzer und der wird damit am besten zurecht kommen.

  • Du musst den Wert noch für Mobilgeräte anpassen, sonst wird der Schließen-Hinweis mitten im Text angezeigt.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Das ist auch bei größeren Monitoren, hier die QHD Auflösung, der Fall.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!