Akkordeon (accordion) zuklappen

[eisenherz]

Bevor hier alle "Profis" Schnappatmung kriegen ... ich habe gesucht. "akkordeon, zuklappen"
Der neuste Artikel den ICH gefunden haben bezieht sich auf 3.5 bzw. 2016. Dort wurde schon geklagt, dass die Anleitung nicht mehr zum Code passt

Ich habe das hier gefunden

display: -1, // -1, alle Akkordions sind am Anfang eingeklappt 

Der Hinweis, dass man hinter

opacity: false 

einsetzen soll ...wird wohl nicht funktionieren oder


Ich habe Template ce_AccordionStart dupliziert. Muss ich das noch umbenennt ( z.B. "close" ergänzen->ce_AccordionStartclose)
Oder überschreibe ich das Original?

<section class="<?= $this->class ?> ce_accordion block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>

  <div class="<?= $this->toggler ?>"<?php if ($this->headlineStyle): ?> style="<?= $this->headlineStyle ?>"<?php endif; ?>>
    <?= $this->headline ?>
  </div>

  <div class="<?= $this->accordion ?>">
    <div>

[derRenner]

Hallo,

hier wirst du fündig: Erdmann & Freunde

[eisenherz]

Ich habe es jetzt so gelöst:

Infos aus mehreren Threads zusammengenagelt und hat erfreulicherweise funktioniert

mit "akkordeon" findet man wenig zu "accordion". Man muss also schonmal wissen was man genau sucht. Macht das Suchen nicht leichter

Neues Template erstellen.
Beim Suchen das richtige Template wählen
Bildschirmfoto 2023-07-05 um 13.15.26.png
Das "j_accordion" nicht wie ich zuerst dachte "start..."

Template anpassen

Hinter

collapsible: true, 

active: false, 

ergänzt
Sieht dann bei mir so aus:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
active: false,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
  });
</script>

Fertig. Einfach wenn man es weiß ... wenn nicht, sucht man halt ein paar Stunden und probiert rum

Kann man das nicht irgendwie leichter auffindbar machen ... bin ja nicht der Einzige der sich in den letzten 10 Jahren daran versucht hat

[mlweb]

Kann man das nicht irgendwie leichter auffindbar machen ... bin ja nicht der Einzige der sich in den letzten 10 Jahren daran versucht hat

Ja sicher. Du kannst dich zum Beispiel an der Dokumentation beteiligen und dort einen entsprechenden Abschnitt hinzufügen, der die Anpassungsmöglichkeiten für das Template ce_accordion.html5 beschreibt. Würde m.E. gut in den Abschnitt Anleitungen passen.