Akkordeon verhält sich seltsam

    Hallo zusammen,

    um die schnelle Übersicht auf einer WP-Seite zu verbessern, setze ich ein Akkordeon ein. Gefunden habe ich es hier. Es erfüllt seine Aufgabe.

    Initial sind die Akkordeons geschlossen. Wenn ich die Seite jedoch um einen Eintrag ergänze, sind die Akkordeons beim nächsten Aufruf der Seite aufgeklappt. Das ist nicht erwünscht. Es ist ja genau der Grund, warum ich diese Technik verwende - der Nutzer der Seite soll selbst entscheiden können, ob er zu einem Eintrag zusätzliche Informationen sehen möchte oder nicht.

    Aus
    [FONT=Courier New][COLOR=#ff0000]<details>[/COLOR][/FONT]
    [INDENT][FONT=Courier New]Ein wenig HTML ...[/FONT][/INDENT]
    [FONT=Courier New]</details>[/FONT]

    wird
    [FONT=Courier New][COLOR=#ff0000]<details open="">[/COLOR][/FONT]
    [INDENT][FONT=Courier New]Ein wenig HTML ...[/FONT][/INDENT]
    [FONT=Courier New]</details>[/FONT]


    Nun die 2 Fragen:

    1. Woran liegt das?
    2. Wie kann das geändert werden?


    Für euer Mitdenken danke ich schon jetzt.
    Liebe Grüße

    [size=12]PS
    Dieselbe Frage habe ich auch im SelfHTML-Forum gestellt, denke aber, dass sie hier wahrscheinlich besser aufgehoben ist.
    Und ja, ich weiß - Crosspostings sind nicht gern gesehen.[/SIZE]

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Das wird whrsl sehr stark mit js realisiert. Geändert kann das auch mit eigenen js. Die classe open wird hinzugefügt damit der background unteranderem die Farbe ändert, wenn das Accordeon geöffnet ist ;)

    Wenn du die Hintergrundfarbe einfach ändern willst kannst du es hiermit ansprechen:


    details[open] summary {
    background: coral;
    margin-bottom: 1em;
    }

    Ääh ... bedeutet das jetzt, dass ich JS einsetzen muss? Das wäre fatal. Weil a) kenne ich mich damit nicht aus, b) soll die Seite technisch so einfach wie nur möglich gehalten werden und c) würde ich mich ja dann womöglich auch noch mit einem ChildTheme herumschlagen müssen.

    Die Seite ist nicht für mich selbst sondern für einen Freund, der bezüglich HTML, CSS etc. so blind ist wie ein Maulwurf. Wenn ich in dem Quelltext also Schnickschnack beifüge, ist sie spätestens dann Asche, wenn er selbst im Backend herum hantiert

    Sehe ich das so richtig?.

    Ein Akkordion kannst Du kaum ohne JS verwirklichen/einsetzen, meist jquery. Durch Dein Hinzufügen einer Option wird die Klasse open hinzugefügt, warum auch immer.

    Es geht um eine (längere) Publikationsliste. Hin und wieder kommt ein Buch/Artikel hinzu und muss in diese Liste aufgenommen werden.

    Auf Akkordeons musst du nicht verzichten, allerdings wirst du nicht darum kommen jquery einzusetzen, da damit das öffnen / schließen umgesetzt wird.

    Du musst halt schauen, dass beim Hinzufügen eben keine Klasse "open" hinzugefügt wird. Wir wissen hier mangels URL und fehlender Erklärung nicht, was Du nutzt, daher können wir Dir nicht sagen, was da und warum das passiert.

    Ich kann das Problem leider nicht nachvollziehen :(! Da es sich bei

    Code
    <details>
    <summary>Hier die Überschrift</summary>
    Hier der Aufklappcode
</details>


    um einen reinen HTML Code handelt (der allerdings vom InternetExplorer nicht unterstützt wird - siehe hier https://caniuse.com/#feat=details ), sollte es keine Rolle spielen, ob du im Code etwas hinzufügst. Beim Reload der Seite sollte immer das Default erscheinen und das wäre Details alle geschlossen.
    Es gäbe aber eine weitere HTML / CSS Methode, die so einen Akkordeon Effekt erzeugt und zwar über die Pseudoklasse :selected bei bei Radio-Buttons oder Checkboxen!
    Schau dir das mal an...
    https://www.mediaevent.de/tutorial/css-accordeon.html
    Das geht dann auch im IE.

    Zitat von Sailor56


    ... der allerdings vom InternetExplorer nicht unterstützt wird - siehe hier https://caniuse.com/#feat=details ) ...


    Besten Dank für diesen Hinweis.

    Zitat von Sailor56


    Schau dir das mal an...
    https://www.mediaevent.de/tutorial/css-accordeon.html


    Das habe ich getan - und es sieht sehr vielversprechend aus. Hier werde ich ansetzen und mal ein wenig herumprobieren.

    Ganz herzlichen Dank für diesen Tipp.
    Beste Grüße

    Nachtrag:

    Eine Erklärung, warum ich die URL nicht angeben möchte.
    Die WP-Seite existiert seit langem. Leider hat der Besitzer (das bin nicht ich) es versäumt, seine WP-Installation auf dem neuesten technischen Stand zu halten. Irgendwann kam es dann so, wie es kommen musste - die Seite konnte nicht mehr dargestellt werden. Sie muss nun also neu aufgesetzt werden. Bei dieser Gelegenheit soll sie auch benutzerfreundlicher gestaltet werden.
    Da es jedoch etliche Menschen gibt, die einen Link auf die Seite gesetzt haben, möchte ich vermeiden, dass sie Entwicklungsschrott zu sehen bekommen. Das habe ich mit dem Plugin "Coming Soon Page & Maintenance Mode" umgesetzt.
    Die URL ist http://dirk-schindelbeck.de/ - hier gibt es jedoch noch nicht viel zu sehen.

    Viele Grüße

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden