Accordion - ein Bereich geöffnet

  • Hallo,

    zuvor hatte ich bereits eine andere Frage zum Accordion mit system-pagebreak in Joomla 4 gestellt. Nun brauche ich Tipps zu einem anderen Aspekt.


    Bisher sind alle Bereiche des Accordions geschlossen, wenn die NutzerInnen auf die Seite kommen. Nun soll aber nach Kundenwunsch der dritte Bereich/Button erst einmal geöffnet sein. Wie kann ich das erreichen? Kann ich dem entsprechenden Modul z. B. eine Klasse mitgeben? Oder dem system-pagebreak?


    Hier noch einmal der Quellcode des Accordions

  • Eine CSS-Klasse ist nicht geeignet, wenn du auf Barrierefreiheit wert legst. Es wäre auch gar nicht möglich. Dafür ist das pagebreak-Plugin von Joomla zu inflexibel. Und für den Slides-Output gibt es auch keine Override-Möglichkeiten.


    Mit Javascript geht das. Ich bin da allerdings eher der "Zusammenbastler". So klappte das bei mir bei einem Bootstrap-5-Joomla-Pagebreak-Accordion mit drei Accordion-Buttons. Beim Öffnen der Seite wird das zweite geöffnet.

    Zum

    Code
    querySelectorAll

    Wenn du mehrere Accordions auf einer Seite hast, kann man das spezifischer gestalten. Hat der umgebende Container, z.B. in einem Modul ein id="firlefanz"

    Code
    querySelectorAll('#firlefanz .accordion-collapse')

    Alle CSS-Selektoren wie man sie aus CSS-Regeln kennt sind möglich will ich damit sagen.


    Bisschen wirst natürlich noch tüfteln müssen ;-)

  • Das JavaScript funktioniert gleich super!

    Allerdings ist es wie du vermutest hast ist es so, dass ich mehrere Accordions auf der Seite habe. Und ich habe alles ausprobiert was mir einfällt um dem umgebenen Container eine Id oder Klasse zu geben. Selbst wenn ich um das Accordion einen div mit Id setze, funktioniert es nicht. Allerdings habe ich gesehen die Überschrift, der Button und das Inhaltselement erhalten immer eine eigen Klasse. Bei dem Element das gleich geöffnet erscheinen soll ist es #article151-sliders3

    Ich habe versucht das Element anzusprechen mit

    Es funktioniert nicht, also ist es nicht richtig :/


    Führt mich mein Gedankengang in die Irre oder muss das JavaScript angepasst werden und es funktioniert?


    Und noch eine Frage. Das JavaScript habe ich in die template.js gesetzt, ist es dort richtig oder kann es dort überschrieben werden bei Updates? Vielleicht gibt es ja auch sowas wie eine user.js.

  • um dem umgebenen Container eine Id oder Klasse zu geben

    Ich meinte ein Modulklassen-Prefix oder wie es heißt. Dann muss man halt einen Modulstil verwenden, der entsprechendes HTML-Gerüst inklusive der Klasse um das gesamte Accordion drumrum legt.


    Man könnte auch im Editor noch ein DIV um den gesamten Block legen.


    Ich persönlich würde dann eher einen eigenen Modul-Override (Layout) verwenden, weil man da die eindeutige Modul-ID abgreifen und drumrumlegen kann, die man dann auch im JavaScript entsprechend einsetzt.


    Es funktioniert nicht, also ist es nicht richtig

    Da in Zeile 4 deines Codes ein Array generiert wird, fehlt in Zeile 9 der numerische Index. Weil auch, wenn nur nach einem Array-Element gesucht wird, bleibts ja trotzdem ein Array.


    In dem Fall also Index-Wert = 0 (erstes Array-Element):

    Code
    var OeffneMich = collapseElementList[0];

    Wenn du aber sicher bist, dass die id unveränderlich ist, kannst auch gleich gezielt direkt das 1 Element holen:

  • Puh, ich habe es mit einem Modul versucht und mit einem div plus ID um das Akkordeon, es hat bei mir nicht funktioniert. Auch meine Idee mit der ID des Artikels und des Sliders hat mich nicht zum Ziel geführt.


    Falls noch jemand etwas dazu weiß, würde es mich sehr freuen.


    Gerne kann ich eine URL dazu schicken, läuft allerdings nicht unter https und lässt sich daher im Moment nicht mit jedem Browser aufrufen.

  • Doch es funktioniert! :)


    Da haben sich gestern Abend Fehler bei mir eingeschlichen. Heute mit klarem Kopf und kleiner Berichtigung läufts. Vielen Dank!


    PS Bitte das Leerzeichen beachten zwischen #firlefanz .accordion-collapse

    Code
    querySelectorAll('#firlefanz .accordion-collapse')