Accordion selbst basteln - auto-collapse geht nicht, Rest funktioniert

Clemens-XS · 3. August 2020

Bei w3schools.com fand ich ein rein CSS-basiertes Accordion, bei dem sich jeder zuvor geöffnete Inhalt automatisch wieder schließt, sobald ein weiterer Inhaltsabschnitt geöffnet wird. So weit die Theorie.

Ich hab das Dingens in meine Experimentier-Website eingebaut und die einfache Collapse-Funktion geht auch auf Anhieb. Aber die mir wichtige vorbeschriebene Automatik des Schließen geht nicht. – Den Code habe ich zig mal auf Tippfehler sowohl CSS-seitig als auch HTML-seitig geprüft, auch auf evtl. Konflikte bei den Klassenbezeichnungen im vorhandenen Template: Alles OK.

Hier der Link zu meiner aktuellen Experimentier-Site, dort unter "Collapse" schauen:

Spoiler anzeigen

Hier die von mir kommentierte Quelle bei w3schools.com

HTML

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=v

Collapse
Note: The data-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

In Joomla mit Protostar werden bereits als Standard folgende JS eingebunden:
/media/jui/js/jquery.min.js
/media/jui/js/bootstrap.min.js

Es fehlt also nur noch bootstrap.min.css
Um Konflikte zu vermeiden, hab ich die Klassen daraus nur so weit wie nötig in separater CSS-Datei eingebunden.


<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <h2>Collapse</h2>
  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
        </h4>
      </div>
      <div id="collapse1" class="panel-collapse collapse in">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
        </h4>
      </div>
      <div id="collapse2" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
        </h4>
      </div>
      <div id="collapse3" class="panel-collapse collapse">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
      </div>
    </div>
  </div> 
</div>
</body>
</html>

Alles anzeigen

Zuletzt hatte ich noch, so weit wie möglich, das Ganze mit dem Firefox-Inspektor geprüft, aber leider auch nix Auffälliges gefunden.

Wie krieg ich die "Schließen-Automatik" ans Laufen, bzw. finde den Fehler?

JoomlaWunder · 3. August 2020

Mmh... Ich kann auch nichts Auffälliges auf der Webseite feststellen, außer dass es auch mit data-parent nicht funktioniert.

Dennoch zähle ich in deinem geposteten Code 27 DIVs. (öffnend + schließend). Sollte ja eigentlich eine gerade Zahl sein. Kannst ja noch mal genau schauen, ob da vielleicht doch etwas fehlt, oder ob ich mich mehrmals verzählt habe.

Wundert mich allerdings, da es ja sonst funktioniert.

Clemens-XS · 3. August 2020

Ich danke dir herzlich für's intensive Nachschauen (und nachzählen).

Auf dieser Testsite ist eh manches merkwürdig, was ich mir nicht erklären kann. Beispiel:

Ich habe viele Bilder mit Inline-CSS auf "float: left" gesetzt. Keine Reaktion! Erst nachdem ich eine eigene Klasse für ein "float: left" gesetzt hatte und die im HTML mit

Code

<img class="img-cl" src="..."

eingesetzt habe, funktionierte das float. Dabei habe ich die template.css genau nach Konflikten abgesucht, aber nix gefunden.

Auf der Demo-Site von w3schools funktioniert's ja auch. Verstehe ich nicht!

JoomlaWunder · 3. August 2020

Zitat von Clemens-XS
Ich habe viele Bilder mit Inline-CSS auf "float: left" gesetzt. Keine Reaktion! Erst nachdem ich eine eigene Klasse für ein "float: left" gesetzt hatte und die im HTML mit
Code
<img class="img-cl" src="..." 
eingesetzt habe, funktionierte das float. Dabei habe ich die template.css genau nach Konflikten abgesucht, aber nix gefunden.

In solchen Fällen versuche ich es immer erst mit einem !important.

Mir ist das aber auch schon passiert, dass ich versehentlich class="float: left;" geschrieben habe, statt es mit style="..." zu machen. Oder ich habe an eine Klasse ein Semikolon gehängt.

Ich muss den Akkordoen-Code nachher selbst mal testen...

EDIT: Funktioniert bei mir auch nicht, allerdings verwende ich BS2. Vielleicht muss man mal direkt auf der Bootstrap-Seite nachschauen!

JoomlaWunder · 3. August 2020

Das habe ich noch gefunden: https://getbootstrap.com/docs/…ollapse-example-accordion

christine2 · 3. August 2020

Hallo,

vorweg: Hab mir den Code nicht angesehen. Weil bei mir funktioniert das Schließen & Wieder Öffnen.

FF. Überprüfe Deine Javascript Einstellungen.

Liebe Grüße

Christine

JoomlaWunder · 4. August 2020

Zitat von christine2

Hallo,

vorweg: Hab mir den Code nicht angesehen. Weil bei mir funktioniert das Schließen & Wieder Öffnen.
FF. Überprüfe Deine Javascript Einstellungen.

Hallo Christine,

die JS-Script-Einstellungen bin ich auch bereits durchgegangen. Ich habe auch verschiedene Browser und Rechner getestet.

Die Problematik ist wohl, dass sich beim Öffnen eines zweiten Inhalts, der erste nicht wieder schließt. Prinzipiell könnte man also alle 3 Beiträge gleichzeitig öffnen. Das ist auf den Demo-Seiten anders. Da wird maximal 1 Inhalt angezeigt, egal was man klickt.

Ich konnte das auf keiner Testseite zum Laufen bekommen.

Aber mit JS scheint es schon zu tun zu haben....

Clemens-XS · 4. August 2020

OK, dann bleibt als Erklärung nur übrig, dass das genutzte JS unterschiedlich ist.

Bei der Demo von w3schools.com wird das JS stets aktuell über CDNs eingebunden, bei meiner Website nutze ich das JS, was mit Joomla ausgeliefert wird.

Mir fehlen geeignete Tools, mit denen ich ein frisch herunter geladenes JQuery vergleichen könnte mit dem in Joomla enthaltenen.

Andererseits hatte ich den Eindruck, dass hier gar kein JS benutzt wird, sondern dass es sich um eine rein CSS-basierte Lösung handelt. Aber... ich sehe mich eher als Laie!

JoomlaWunder · 4. August 2020

Ich bin ja neugierig und habe die verschiedenen Möglichkeiten mal unter Joomla 4 Beta 3 getestet. Da besteht das gleiche Problem. Da funktioniert auch nicht das "panel-collapse collapse in", um den gewählten Inhalt beim Laden der Seite automatisch geöffnet anzuzeigen.

Für weitere Analysen fehlt mir momentan leider die Zeit.

Clemens-XS · 4. August 2020

Herzlichen Dank, dass du dich für mein Anliegen so engagiert hast und ich verstehe, dass deine Zeit dafür begrenzt ist.

Die von mir gewünschte "Automatik" bezieht sich aber nicht auf das collapse in, sondern auf das Schließen noch geöffneter Abschnitte, sobald ein neuer geöffnet wird. Aber vielleicht meintest du das ja.

Interessant ist höchstens, ob unter Joomla-4 ebenfalls die Demo funktioniert und die Umsetzung auf Joomla nicht.

Wie ich schon schrieb, hatte ich vor Einfügen der Accordion-Funktion nebst CSS-Definitionen auch geprüft, ob es Konflikte mit KLassen aus dem Template.css gibt. Das ist nicht der Fall.

Aber wenn ich die vollständige bootstrap.css oder bootstrap.min.css per @import in die template.css mit hinein nehme, dann crasht die ganze Website und es wird nix mehr angezeigt. Die Ursache hab ich nicht finden können, weil mein Wissen nicht ausreicht.

JoomlaWunder · 4. August 2020

Zitat von Clemens-XS

Die von mir gewünschte "Automatik" bezieht sich aber nicht auf das collapse in, sondern auf das Schließen noch geöffneter Abschnitte, sobald ein neuer geöffnet wird. Aber vielleicht meintest du das ja.

Das ist schon klar. Dass "collapse in" scheinbar nicht funktioniert, ist ein weiteres Problem, welches aber erst beim Testen mit Joomla 4 Beta 3 existiert. Unter Joomla 3 wird der gewählte Inhalt beim Laden der Seiten (wie gewollt) geöffnet. Das könnte aber auch am Unterschied zwischen BS3 und BS4 liegen. In BS4 wurde ja einiges entfernt. Das ist mir nur so nebenbei aufgefallen und hat mit deinem eigentlichen Problem nichts zu tun.

Clemens-XS · 4. August 2020

Naja, notfalls kann ich ja wieder Regular Labs Slider verwenden. Mir war bloß der Codeaufwand zu groß, sowohl Backend als auch in der ausgelieferten Seite incl. Inline-Script. Zudem scheint sich die Funktionalität der freien Version mit ca. jedem zweiten Release ständig weiter zu verringern.

Mit JS lässt sich das "auto-collapse" anscheinend zuverlässiger lösen, als mit reinem CSS.

Vielleicht kommt mir ja noch eine bessere Accordion-Lösung unter?

addi · 6. August 2020

Das ist aber Spielerei, während die Lesbarkeit der Überschriften, was viel wichtiger ist, überhaupt nicht funktioniert.

Clemens-XS · 6. August 2020

addi Dir ist aber wohl nicht klar, dass es sich hier um eine reine Test- oder Experimentier-Website handelt?

Es geht ausschließlich um die technischen Funktionen.

Aber vielleicht hast du ja eine Idee, wie "auto-close" gelöst werden kann?

Immerhin haben wir bisher zwei Codevarianten für das Accordion und beide haben das gleiche Problem. Und für die hier diskutierte gibt es sogar eine funktionierende Demo bei w3schools.com

addi · 7. August 2020

Oh ja. Noch eine Idee:

Du verwendest HTML mit Selektoren für BS3 oder höher und greifst bei Joomla auf das Javscript von Boostrap 2.3.2 zurück. Beides spielt nicht zusammen. Dann wäre es die Lösung, das HTML entsprechend auszutauschen, hier ist es //getbootstrap.com/2.3.2/javascript.html#collapse

JoomlaWunder · 7. August 2020

Zitat von addi

Oh ja. Noch eine Idee:

Du verwendest HTML mit Selektoren für BS3 oder höher und greifst bei Joomla auf das Javscript von Boostrap 2.3.2 zurück. Beides spielt nicht zusammen. Dann wäre es die Lösung, das HTML entsprechend auszutauschen, hier ist es //getbootstrap.com/2.3.2/javascript.html#collapse

Dieser Code funktioniert mit BS2.

Müsste nur noch geklärt werden, warum der BS3-Code nicht mit BS3 und der BS4-Code nicht mit BS4 läuft.

Hast du da auch eine Idee?

p.s. Clemens-XS nutzt eigentlich BS3 statt BS2. Eventuell ist das nicht korrekt "aktualisiert" bzw. ersetzt.

addi · 7. August 2020

Zitat von JoomlaWunder

Dieser Code funktioniert mit BS2.
Müsste nur noch geklärt werden, warum der BS3-Code nicht mit BS3 und der BS4-Code nicht mit BS4 läuft.
Hast du da auch eine Idee?

Da trage ich nun vermutlich Eulen nach Athen. Es gibt nur wenige Ansatzpunkte, warum etwas hier nicht funktioniert. Bei den BS-Demos sieht man ja, dass das Accordion prinzipiell funktioniert und warum sollte es auch anders sein?

Probleme tauchen auf, wenn Joomla BS2 einbindet. Leider ist zumindest bei Joomla 3 die Asset-Einbindung nicht global geregelt, es fehlt ein Asset Manager und auch passende Coding-Konventionen. Gerade Dritterweiterungen, aber auch Joomla selbst, binden daher ungereglt jQuery und Bootstrap 2 ein. Nur ein komplettes BS3 bzw. BS4 Template mit den Overrides für die genutzen Komponenten und Module kann hier der Ausweg sein. Frontend Editing, falls man darauf setzt, könnte damit zum Problem werden.

addi · 16. August 2020

BS4.5 collapse (accordion) enthält einen heimtückischen kleinen Fehler, der im jQuery-basierten BS4.0 noch fehlt. Hier die Korrektur für Zeile 1413 der bootstrap.js, wo ein '#' fehlt. Vermutlich ist ein ähnlicher Fehler auch in BS3.4 zu finden.

Code

    _proto._getParent = function _getParent() {
      var _this3 = this;

      var parent;

      if (Util.isElement(this._config.parent)) {
        parent = this._config.parent; // It's a jQuery object

        if (typeof this._config.parent.jquery !== 'undefined') {
          parent = this._config.parent[0];
        }
      } else {
        parent = document.querySelector('#'+this._config.parent);
      }

Alles anzeigen

Clemens-XS · 17. August 2020

addi und JoomlaWunder

Ich danke euch herzlich für euer Engagement!

Meine Antwort hier ist irgendwie verloren gegangen.

Inzwischen hatte ich die von addi verlinkte Accordion-Lösung ausprobiert. Und die funktionierte mitsamt autocollapse auf Anhieb.

Für mich ist zwar damit die Aufgabe gelöst. Allerdings sehe ich, sobald ein Upgrade auf Joomla 4 erfolgt und somit auf eine neue Version des Bootstrap, werde ich evtl. erneut solche Schwierigkeiten bekommen können.

Naja bis dahin ist ja noch Zeit

Tags