Mehrere Accordions/Akkordeons mit j_accordion.html5 Template

[d.hupp]

Hallo Community,

ich suche eine Lösung für das folgende Problem:

Auf einer (1) Inhaltsseite habe ich 3 Akkordeons mit mehreren Punkten nebeneinander zu stehen. Diese sollen unabhängig von einander bedienbar sein.

Folgendes Verhalten ist angestrebt:

Die ersten Punkte der 3 Akkordeons sind offen - das heißt Links, Mitte, Rechts hat jeweils ein offenen Bereich. Klicke ich links den Abschnitt an wird nur dieser umgeschaltet, die anderen zwei bleiben unberührt.

Zur Zeit wird bei einem Klick auf einen Abschnitt eines Akkordeons alles andere geschlossen.

Ich verwende jQuery und das j_accordion.html5 Template - mootools ist nicht erwünscht.

Vielleicht hat ja jemand bereits ein ähnliches Problem lösen können?

[d.hupp]

Hier kurz die Lösung zu meinem Problem. Der nachfolgende Code muss im j_accordion.html5 Template eingesetzt werden.

Im Anschluss einfach dem Artikel (welcher das Akkordeon enthält) die CSS-Klasse acco geben. Anschließend kann ich die Akkordeons einzeln über mehrere Artikel ansprechen.

Aufbau wie folgt:

• Artikel (Klasse acco)
  
  • Akkordeon Anfang
  • Inhalt
  • Akkordeon Ende

usw.

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
  (function($) {
    $(document).ready(function() {
      $('.acco').accordion({
        // Put custom options here
        heightStyle: 'content',
        header: 'div.toggler',
          collapsible: true,
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function() {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
    });
  })(jQuery);
</script>