Accordion - ein Bereich geöffnet

bettin · 21. November 2021

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

Code

<div class="accordion-item ">
  <h2 class="accordion-header" id="article152-sliders1-heading">
    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#article152-sliders1" aria-expanded="false" aria-controls="article152-sliders1" role="tab">
        Meine Überschrift
    </button>
  </h2>
  <div id="article152-sliders1" class="accordion-collapse collapse" aria-labelledby="article152-sliders1-heading" role="tabpanel" style="">
        <div class="accordion-body"> 
        <p></p>
         <div id="mod-custom148" class="mod-custom custom">
          <p>......</p></div>
          <p>......</p>
         </div>
    </div>
  </div>

usw.

Alles anzeigen

Re:Later · 21. November 2021

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.

Code

<script>
document.addEventListener('DOMContentLoaded', (event) =>
{
    // Finde alle collapsbare Elemente des Accordions.
    var collapseElementList = [].slice.call(document.querySelectorAll('.accordion-collapse'));

    if (collapseElementList && collapseElementList.length)
    {
        // Ich will das zweite öffnen, also index 1.
        var OeffneMich = collapseElementList[1];

        var bsCollapse = new bootstrap.Collapse(OeffneMich,
        {
            toggle: true
        });
    }
});
</script>

Alles anzeigen

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

bettin · 21. November 2021

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

Code

<h2 class="accordion-header" id="article151-sliders3-heading">
    <button class="accordion-button  collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#article151-sliders3" aria-expanded="" aria-controls="article151-sliders3" role="tab">
        Meine Überschrift
    </button>
</h2>
<div id="article151-sliders3" class="accordion-collapse collapse " aria-labelledby="article151-sliders3-heading" role="tabpanel">
    <div class="accordion-body"> 
    <p></p>
    <div id="mod-custom141" class="mod-custom custom">
     </div>
   </div>
<div class="accordion-body"> 
    <p></p>
    <div id="mod-custom141" class="mod-custom custom">
    <p>Mein Inhalt</p>
    </div>
    <p></p>
 </div>

Alles anzeigen

Ich habe versucht das Element anzusprechen mit

Code

document.addEventListener('DOMContentLoaded', (event) =>
{
    // Finde alle collapsbare Elemente des Accordions.
    var collapseElementList = [].slice.call(document.querySelectorAll('#article151-sliders3.accordion-collapse'));

    if (collapseElementList && collapseElementList.length)
    {
        // Das zuvor bestimmte Element will ich öffnen, also article 151 slider 3.
        var OeffneMich = collapseElementList[];

        var bsCollapse = new bootstrap.Collapse(OeffneMich,
        {
            toggle: true
        });
    }
});

Alles anzeigen

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.

Re:Later · 21. November 2021

Zitat von bettin

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.

Zitat von bettin

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:

Code

<script>
document.addEventListener('DOMContentLoaded', (event) =>
{
        var OeffneMich = document.querySelector('#article15-sliders3.accordion-collapse');

        if (OeffneMich)
        {
            var bsCollapse = new bootstrap.Collapse(OeffneMich,
            {
                    toggle: true
            });
        }
});
</script>

Alles anzeigen

bettin · 22. November 2021

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.

bettin · 23. November 2021

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')

Tags