Akkordeon mit jQuery *gelöst*

Ahoi zusammen,

für den Fall, dass es jemand brauchen kann, hier eine Anleitung, um das Contao-Core-Feature Akkordeon mit jQuery umzusetzen:

JS:

Code:

---

$(document).ready( function() {
        $('.toggler').not('.toggler_active').next('.accordion').hide();
        $('.toggler').click( function() {
                var trig = $(this);
                if ( trig.hasClass('toggler_active') ) {
                        trig.next('.accordion').slideToggle('fast');
                        trig.removeClass('toggler_active');
                } else {
                        $('.toggler_active').next('.accordion').slideToggle('fast');
                        $('.toggler_active').removeClass('toggler_active');
                        trig.next('.accordion').slideToggle('fast');
                        trig.addClass('toggler_active');
                };
                return false;
        });
});

---

CSS-Beispiel:

Code:

---

.toggler {
        font-size: 17px; font-size: 1.7rem;
        line-height: 1.3em;
        color: #fff;
        text-transform: uppercase;
               
        background: #3a0000 url('../images/icon-plus.png') no-repeat 98% center;
        border:1px solid #888;
        cursor:pointer;
        padding:5px;
        margin-bottom: 10px;
       
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
}

.toggler_active {
        color:#fff;
        background: #3a0000 url('../images/icon-minus.png') no-repeat 98% center;
}

div.accordion {
        margin-bottom: 30px;
}

.ce_accordion {
        margin-bottom:5px;
}

---