akkordeon mit details->summary: zusätzlicher "close"-button mit CSS möglich?

[michaah]

Mein Akkordeon, welches ich einfach mit details/summary umgesetzt habe, funktioniert, darum geht es also nicht.

Ich würde es nur gerne so gestalten, dass am unteren Ende des summary ebenfalls die Möglichkeit zum schließen besteht, so dass man nicht erst nochmals hochscrollen muß.

Meine Googelei ergab aber nur eine JS Lösung, was für mich ein no-go ist. Wäre das mit CSS möglich? Falls ja, wie?

[Rolf B]

Hallo michaah,

das sieht nach meiner Kenntnis schlecht aus. summary/details ist ziemlich starr. Und ein weiterer Button ist ein neues Element mit neuem Verhalten, dafür ist immer HTML + JS zuständig.

Rolf

[Gunnar Bittersmann]

@@michaah

eine JS Lösung, was für mich ein no-go ist.

Warum das denn??

Wäre das mit CSS möglich?

Njein.

Zuerst dachte ich an ein Pseudo-Element in summary, das bei geöffneten Details unten plaziert wird. Wenn man auf das Pseudoelement clickt, kommt das beim summary-Element an, da das Pseudoelement strukturell darin liegt.

Blöd: Per Tastatur ist das Pseudoelement nicht erreichbar. Meh.

Statt des Pseudoelements kann man auch einen richtigen Button ins in summary-Element packen.

Blöd: Der Button kommt in der Tab-Reihenfolge gleich nach dem summary-Element, noch vor den Links in den Details. Meh.

Die beste Lösung ist, den Button nach unten ans Ende der details zu packen (wo er ja visuell auch sein soll) und die Funktion mit JavaScript zu implementieren.

😷 LLAP

[michaah]

Erstmal danke euch beiden für eure Hinweise, die ja im Wesentlichen bestätigen, was ich im Netz gefunden habe.

Im Moment weiß ich nicht was ich machen soll. Ich zeige mit dem Akkordeon Zusatzinformation die eigentlich nur für Erstbesucher interessant ist. Daher auf- und zuklappen.

Im smartphone Viewport-Einspalten-Schlauch ist das ok, dass der nachfolgende Inhalt nach unten verschoben wird, im mehrspaltigen design hebe ich das detail/summary-Element mittel position aus dem Kontext heraus über den Inhalt. Das klappt gut. Das einzige was mich stört ist eben dass ich dann untern keinen "Schließen"-Knopf habe.

Alternative: figure Das habe ich so in der alten Seite testweise eingebaut, auf Basis von Rolfs Beispiel (wird wohl 2-3 Monate her sein). Das hat den Vorteil dass ich da die knöpfe positionieren kann (obwohl ich auch damit mein liebe not habe).

Aus irgendeinem Grund gelingt es mir nicht den "figure"-code, der in der alten Seite (mit einigen positionierten div's) funktioniert wie er soll für die neue Seite anzupassen. Das beginnt damit dass das figure Element immer sichtbar ist, nicht erst beim klicken auf das "a", sich dementsprechend also nicht schließen läßt. Und die Positionierung der beiden Knöpfe ist mir ein Rätsel.

Ja, und jetzt ist also die Lösung JS. Das hätte ich mir vermutlich längst angeschaut wenn ich das Webseitengeschäft mit weitern Seiten betreiben wollte. Aber jetzt für diese ein Seite habe ich so ein bisschen den Spleen wg. Dingen die ich anders lösen kann nicht mehr damit anzufangen ;-) ...

Vielleicht könnt ihr mir sagen welche Eigenschaften in der figure-Konstruktion für das Verstecken/Anzeigen der Auslöser ist? Neee, nich Kristallkugelmodus, ganz allgemein, was schalten ein was schalten aus? Das gebe ich sofort zu, das blicke ich gar nicht.

Und wenn ich das nicht hinbekomme nehme ich doch die details-Variante, dann fehlt eben der Knopf, wäre aber schade, denn er fehlt dann wirklich.

Jetzt trinke ich noch ein Gute Nacht Bier und dann gute Nacht

Gruß

M

[Rolf B]

Hallo michaah,

was auch immer Du für ein Beispiel meinst, ich erinnere mich nicht und das Forum findet nicht wirklich etwas, das mich daran erinnert. Hast Du einen Link?

<figure> an sich ist ja erstmal nur ein semantisches Element zur Markierung von Abbildungen (wobei z.B.. Textkästen auch Abbildungen sein können). Sie zu verstecken oder aus dem normalen Fluss herauszuholen ist Sache anderer Instanzen. Das kann ein <details> Elements drumherum sein, oder Javascript-gestützte Buttons.

Um zu erklären, warum es bei Dir nicht geht, müsste man dein Markup und CSS sehen. Dann könnte man deine Verständnisprobleme aufarbeiten. "Geht nicht" und "Krieg ich nicht hin" ist keine Ausgangsposition, um zu helfen.

Typischer Auslöser von Problemen ist, dass man nicht versteht, was man sich zusammenkopiert, und dann das Kopiergut nicht korrekt an die Zielseite anpasst. Schachtelungen von Elementen müssen stimmen, kopierte IDs oder Klassennamen dürfen nicht in Konflikt mit dem übrigen Teil kommen und im CSS müssen die Selektoren so angepasst werden, dass sie die kopierten Teile immer noch treffen - und sonst nichts.

Gelegentlich kopiert man auch zu wenig. Minimalbeispiel:

<div id="foo">
  <figure>
     Something
     <figcaption>Dingsbums</figcaption>
  </figure>
</div>

Angenommen, das sei die Kopiervorlage. Ich kopiere das <figure> Element heraus und lasse das <div> weg. Und wenn ich dann noch dieses CSS übernehme:

#foo figure {
   border: 10px solid red;
}

muss ich mich nicht wundern, wenn die figure keinen roten Rand bekommt.

Rolf