Erstes Akkordeonelement soll geschlossen sein

[BrainStormer]

Hallo liebe Contao Community,
ich habe ein kleines Problemchen mit dem Akkordeon Element. Und zwar wenn ich eine Seite öffne auf den ein oder mehrere Akkordeon Elemente sind, ist das erste Akkordeon Element immer aufgeklappt. Kann man das ändern, sodass alle Akkordeon Elemente bei öffnen der Seite geschlossen sind?

Lg
AndyCon

[the_scrat]

Hi,

Hast du es denn schonmal mit der Forensuche versucht?

Einfach rechts oben ins Suchfeld "Akkordeon geschlossen" eingeben, Lupe anklicken und ... "the magic happens" :-)

[Onkel123]

Hi,
das selbe hatte ich auch mal. Habe dann hier im Forum folgendes gefunden (für moo):

Das Template moo_accordion geändert auf:

<script>
  (function() {
    window.addEvent('domready', function() {
      new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
        opacity: false,
        //  Alle  Akkordeons  eingeklappt
		display:  -1,
        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) {
              this.fireEvent('click');
            }
          },
          'focus': function() {
            this.addClass('hover');
          },
          'blur': function() {
            this.removeClass('hover');
          },
          'mouseenter': function() {
            this.addClass('hover');
          },
          'mouseleave': function() {
            this.removeClass('hover');
          }
        });
      });
      $$('div.ce_accordion').each(function(el) {
        el.setProperty('role', 'tablist');
      });
      $$('div.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
    });
  })();
</script>

Danach waren bei mir auf der Seite alle Accordions geschlossen.

[BrainStormer]

Danke.
Funtkioniert

[jscholtysik]

Und hier noch die Möglichkeit in jQuery. Das Template heißt j_accordion.html5:

<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,
        // Alle Akkordeons eingeklappt
        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>