j_accordion.html5 - mehrere Elemente unabhängig öffnen

[Dublay]

Hallo,

ist es möglich, das j_accordion.html5 so zu nutzen, dass ich in einem Accordion die Elemente unabhängig bedienen kann? Aktuell sorgt z.B. ein Klick auf Element 2 ja dafür, dass Element 1 sich schliesst. Ich würde es gerne dem Nutzer überlassen, welche Bereiche er öffnet und wieder schließt.

Vielen Dank für Eure Tipps!

[Spooky]

<script>
  jQuery(function($) {
    $('.ce_accordion').each(function(i,e){
      $(this).accordion({
        heightStyle: 'content',
        header: '.toggler',
        collapsible: true,
        animate: 300,
        active: i > 0 ? false : 0,
        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>

Das

active: i > 0 ? false : 0,

brauchst du evt. nicht.

[Dublay]

<script>
  jQuery(function($) {
    $('.ce_accordion').each(function(i,e){
      $(this).accordion({
        heightStyle: 'content',
        header: '.toggler',
        collapsible: true,
        animate: 300,
        active: i > 0 ? false : 0,
        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>

Das

active: i > 0 ? false : 0,

brauchst du evt. nicht.

Hui, damit ist alles geöffnet und nichts mehr klickbar

EDIT: Sorry - mein Fehler. Super! Danke!

[Spooky]

Wie sieht dein aktuelles j_accordion Template aus?

[Dublay]

Wie sieht dein aktuelles j_accordion Template aus?

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $('.ce_accordion').each(function(i,e){
      $(this).accordion({
        heightStyle: 'content',
        header: '.toggler',
        collapsible: true,
        active: false,
        animate: 300,
        active: i > 0 ? false : 0,
        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>

Das active: false scheint nicht zu greifen. Ist das da falsch? Ich würde gerne alle geschlossen starten.

[Spooky]

Du hast zwei mal active drin.

[Dublay]

Du hast zwei mal active drin.

Uffz...jo,..jetzt tut es auch! Herzlichen Dank!!!

[planepix]

Ahoi zusammen,

hat jemand das obige Scriptbeispiel von Spooky so erweitert, dass man das auch bei verschachtelten Akkordeons ( Eine Unterebene) anwenden kann?

[oligro]

Hallo,
habe das Script, wie oben:

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
jQuery(function($) {
$('.ce_accordion').each(function(i,e){
$(this).accordion({
heightStyle: 'content',
header: '.toggler',
collapsible: true,
active: true,
animate: 300,
active: i > 0 ? false : 0,
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>

Weiß jemand wie ich das abändere, das beim Seitenload alle Akkordeons gleichzeitig geöffnet sind?