Erstes Accordion ist immer offen, soll aber geschlossen sein.

Das Komma trennt die Parameter voneinander. Und in deinem Fall kommt da noch ein Parameter create.

Gesendet von meinem L52 mit Tapatalk

Hallo,

verwende contao 3.5 mit jquery.
Habe das template entsprechend geändert (ist auch im richtigen Verzeichnis, Änderung ist auch im Quelltext sichtbar), und zwar so:

Code:

---

<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
      active: false
       
        create: function(event, ui) {
          ui.header.addClass('active');
          $('div.toggler').attr('tabindex', 0);
        },
        activate: function(event, ui) {
          ui.newHeader.addClass('active');
          ui.oldHeader.removeClass('active');
          $('div.toggler').attr('tabindex', 0);
         
        }
       
      });
    });
  })(jQuery);
</script>

---

Die Änderung zieht auch, nur leider mit dem Ergebnis, dass jetzt beide Akkordions offen sind anstatt beide geschlossen. Was habe ich falsch gemacht?

...hat sich schon erledigt. Lag am (fehlenden) Komma; den Beitrag dazu hab ich übersehen. Mit dem Komma funktionierts :).

hey, markier doch bitte in deinem Zitat die Stelle farblich und korrigiere es grad. So hat der nächste es leichter wegen dem komma ....

okay, erledigt! :)

Zitat:

---

Code:

---

<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        active: false,
       
        create: function(event, ui) {
          ui.header.addClass('active');
          $('div.toggler').attr('tabindex', 0);
        },
        activate: function(event, ui) {
          ui.newHeader.addClass('active');
          ui.oldHeader.removeClass('active');
          $('div.toggler').attr('tabindex', 0);
         
        }
       
      });
    });
  })(jQuery);
</script>

---

---

jetzt ist es wieder narrensicher zum kopieren ;)

Ich habe genau das gleiche Anliegen entsprechend dem Thema.

Leider kann ich die Lösung aus den bisherigen Beiträgen nicht heraus lesen.
Im Backend habe ich unter Templates neue Templates erstellt und aus der Vorschlagsliste die unten beschriebenen Templates ausgewählt
Anhang 20731Anhang 20731

Ich habe bereits, wie es im Handbuch steht, das Template moo_accordion.html5 um die Zeile display: -1, // -1, alle Akkordions sind am Anfang eingeklappt erweitert. Dennoch ist immer das erste Element im Akkordeon geöffnet.

Code:

---

<script>
  (function() {
    window.addEvent('domready', function() {
      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: false,
        display: -1, // -1, alle Akkordions sind am Anfang eingeklappt
        alwaysHide: true,
        onActive: function(tog, el) {
          el.setProperty('aria-hidden', 'false');
          tog.addClass('active');
          tog.getNext('div').fade('in');
          tog.setProperty('aria-expanded', 'true');
          return false;
        },
        onBackground: function(tog, el) {
          el.setProperty('aria-hidden', 'true');
          tog.removeClass('active');
          tog.getNext('div').fade('out');
          tog.setProperty('aria-expanded', 'false');
          return false;
        }
      });
      $$('div.toggler').each(function(el) {
        el.setProperty('role', 'tab');
        el.setProperty('tabindex', 0);
        el.addEvents({
          'keypress': function(event) {
            if (event.code == 13 || event.code == 32) {
              this.fireEvent('click');
            }
          },
          'focus': function() {
            this.addClass('hover');
          },
          'blur': function() {
            this.removeClass('hover');
          },
          'mouseenter': function() {
            this.addClass('hover');
          },
          'mouseleave': function() {
            this.removeClass('hover');
          }
        });
      });
      $$('div.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
    });
  })();
</script>

---

Der code für das Template j_accordion.html5 sieht so aus:

Code:

---

<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $(document).accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
        collapsible: true,
        create: function(event, ui) {
          ui.header.addClass('active');
          $('div.toggler').attr('tabindex', 0);
        },
        activate: function(event, ui) {
          ui.newHeader.addClass('active');
          ui.oldHeader.removeClass('active');
          $('div.toggler').attr('tabindex', 0);
        }
      });
    });
  })(jQuery);
</script>

---

Jetzt müsstest du dich aber entscheiden, bzw. wissen, ob du Mootools oder jQuery einsetzt im Frontend. Denn es ist nur eines der beiden Template-Anpassungen nötig.
Und im übrigen, ist das jQuery bei dir noch nicht angepasst, zumindest fehlt dort wohl die

Code:

---

active: false,

---

Zeile.

Ich löse das Grundproblem ohne das Bearbeiten von Templates:

1. vor dem ersten Akkordeon-Element ein "leeres" Akkordeon-Einzelelement anlegen mit Text "." und CSS-Klasse "hide"
2. im Website-Stylesheet: .hide { display: none; }

Jetzt wird das erste Akkordeon im Hintergrund geöffnet, aber eben nicht angezeigt. Das hat den Vorteil, dass ich somit stellenweise angeben kann, ob oder ob eben nicht das erste Akkordeon geöffnet werden soll.