Die Elemente <details> und <summary> in HTML eignen sich gut für das Umschalten von Inhaltsblöcken. Standardmäßig sehen Sie das <summary>-Element mit einem Umschalt-Dreieck (▶︎) daneben. Klicken Sie darauf, um den Rest des Textes innerhalb des <details>-Elements zu erweitern.
Aber nehmen wir an, Sie möchten, dass es sich mit einem Klick öffnet und das war's dann. Interaktivität beendet. Ich habe dies in einem dieser "Mehr lesen"-Artikeldesigns gesehen, bei denen man auf diesen "Mehr lesen"-Button klickt und der Artikel sich erweitert, aber es gibt kein Zurück.
Ich möchte vorausschicken, dass ich nicht sicher bin, ob dies generell eine gute Idee ist. Die Entfernung von Steuerelementen fühlt sich einfach nicht gut an, ebenso wenig wie das Hineinstopfen zu viel wichtiger Inhalte in ein <details>-Element. Aber hey, das Web ist groß und man weiß nie, was man brauchen könnte. Die Tatsache, dass dies mit ein paar Zeilen HTML/CSS gemacht werden kann, ist überzeugend und könnte den Bedarf an aufwendigeren Lösungen reduzieren.
Der Haupttrick hier ist, die Zusammenfassung zu verstecken, wenn das Details-Element geöffnet ist.
details[open] summary {
display: none;
}Das ist im Grunde alles.
Ja, ein schöner kleiner Trick.
Ich sehe wirklich kein Problem damit, es nicht schließen zu können. Tatsächlich habe ich dies auf Websites mit jQuery gemacht, wo nach dem Öffnen der "Mehr"-Button verschwindet. Ich denke, es funktioniert, da es die Benutzeroberfläche entlastet und dem Benutzer eine Option weniger gibt, außerdem wollten sie sowieso mehr lesen.
HTML hat sich weit entwickelt, ich freue mich darauf, dies in Zukunft zu nutzen.
Um diesen großartigen Trick zu ergänzen: Wenn Sie die Zusammenfassung sichtbar halten möchten, sollten Sie Zeigerereignisse abbrechen können.
Dies verhindert nicht, dass es geschlossen wird. Die Regel für Zeigerereignisse
pointer-eventsverhindert nur, dass es mit einem Zeiger geschlossen wird.Es kann immer noch über Tastaturbefehle (und potenziell einige andere Methoden, wie einige Sprachsteuerungen, die ich noch nicht überprüft habe) geschlossen werden.
Ich komme wegen des CSS.
Ich bleibe wegen der Witze.
Falls wir die
<summary>sichtbar halten wollen, könnten wirpointer-events: none;darauf anwenden.Es scheint mir eine Fehlverwendung zu sein. Die HTML-Spezifikation besagt: "Der User-Agent sollte dem Benutzer erlauben, zu verlangen, dass die zusätzlichen Informationen angezeigt oder verborgen werden."
Browser sollten wahrscheinlich jederzeit eine Zusammenfassung anzeigen. Sie könnten entweder die Zusammenfassung nicht verstecken oder die Standardzusammenfassung ("Details") anzeigen, wenn die benutzerdefinierte Zusammenfassung versteckt ist.
Danke für den Hinweis, Chris.
Ich habe selbst mit einem TL;DR-Toggle herumgespielt, da ich ihn auf einigen Mainstream-Websites gesehen habe (z. B. bei 3 Mobile), aber ich kann mich nicht entscheiden, ob er notwendig ist?
Wahrscheinlich besser mit etwas wie dem, was Sie beschrieben haben, dann ist es praktischer, aber weniger eine modische Wahl, also wird es nicht veraltet sein.
Toller Tipp! Es scheint lustig, dies für eine Quiz-Website zu verwenden, auf der Sie die Frage anzeigen und einen "Antwort anzeigen"-Toggle haben, der nicht geschlossen werden kann.