Hallo liebe Community,
ich bin ein relativer Contao-Neuling und hätte eine Frage:
Ich habe auf meiner Webseite ein jQuery-Akkordeon eingefügt und die Toggler bereits per CSS etwas gestylet (farblich hervorgehoben, usw.).
Zur besseren Übersichtlichkeit und dem frühzeitigen "Erkennen" würde ich jetzt gerne auf der rechten Seite jedes Togglers ein Icon (Pfeil) integrieren, welches verdeutlichen soll, dass z.B. bei geschlossenen Togglern noch Content verborgen ist.
Wie kann ich diesen Pfeil am besten einbinden, wenn er sich mit öffnen/schließen der Toggler automatisch drehen soll (am besten mit dynamischer Geschwindigkeit wie bei den Akkordeon-Contents)?
Leider kann ich nicht wirklich PHP, weswegen der Code aus der j_accordion.html5 mir nicht wirklich sagt, wo ich etwas einfügen sollte...
PHP-Code:
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo 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
});
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>
Gibt es jemanden der mir helfen kann?
Vielen Dank im voraus!
VG Peter
Lesezeichen