Accordion (jQuery) Toggler Icon hinzufügen

[petkett]

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...

<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

[Sioweb]

Ho!

also das Icon baust du am besten mit CSS ein, wenn du nämlich auf ein Accordion klickst, bekommt es eine Klasse die "active" oder so heißt. Den Klassennamen kannst du mit Firebug oder den Entwicklertools des jeweiligen Browsers rausfinden.

Wenn du den Klassennamen hast, überschreibst du das Icon einfach mit Hilfe der neuen Klasse.

Mit den CSS3 Transitions könntest du ihn auch drehen lassen.

[petkett]

Danke für deine Antwort Sioweb.

Damit habe ich jetzt hinbekommen, dass der Pfeil 1. da ist und 2. je nach Status des Togglers seine Richtung ändert. Das Ganze kann ich aber jetzt nicht zeitlich verzögern bzw. drehen lassen mit der css-transition. Also er zeigt jetzt entweder nach unten oder nach rechts, eine Drehung bekomm ich noch nicht hin. =/
Vielleicht sollte ich noch einmal beschreiben, wie ich meinen Toggler gestylet habe... und zwar besteht er aus einem Farbverlauf + Bild (der Pfeil), welches rechts außen positioniert ist. Wie kann ich jetzt diesen Pfeil (Bild) direkt "animieren" also wie muss da die transition aussehen? Geht das überhaupt bei einem Background aus Gradient + Image, dass man das Image einzeln ansprechen kann?

Kannst du mir da noch einmal helfen? ;-)

Danke schonmal!

Grüße
Peter

[Sioweb]

Hm ich müsste jetzt selber schauen, aber da du ja Gradient einsetzt, denke ich mal das du keinen großen Wert auf IE8 legst

Du könntest .toggler:before nutzen und den Animieren mit Rotate usw. Transition kannst du ja verzögert abspielen transition: value time delay;

.toggler:before {
width: 20px;
height: 20px;
background: url("dein-pfeil");
-webkit-transition: all .4s;
transition: all .4s;
}

.active:before {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

Statt all kannst du sicher transform schreiben (All ist nicht so gut) wie genau das ganze aussieht weiß ich auch grade nicht auswendig ^^

[chinagirl]

hi!

ich verwende das accordion jquerie, auf die art und weise, dass das 1. accordion geöffnet ist.
für das geschlossene accordion verwende ich ein icon +, für das offene ein icon -.

das funktioniert auch richtig, bis auf das 1. accordion das automatisch geöffnet ist, das sollte ein - haben.
hat jedoch ein +.

wie kann ich das ändern?

grüße
chinagirl

[kos]

Schau es Dir doch mal mit einem Developer-Tool bei der Online-Demo an.
Da wird mit

.toggler:after {
...
background-image: url("../../files/contaodemo/theme/img/icons/icon_arrow-bottom.png");
...
}

für den geschlossenen und mit

.toggler.ui-state-active:after {
background-image: url("../../files/contaodemo/theme/img/icons/icon_arrow-top.png");
}

für den geöffneten Zustand gearbeitet.

[chinagirl]

hallo karl!

ich verwende die classen
.ce_accordion .toggler für den geschlossenen zustand
und
.ce_accordion .toggler.active für den offenen zustand

das funktioniert auch, nur das 1. accordion, dass automatisch offen erscheint sollte den icon für den offenen zustand haben!
hat es aber nicht.

grüße,
chinagirl

[kos]

... nur das 1. accordion, dass automatisch offen erscheint sollte den icon für den offenen zustand haben!
hat es aber nicht.

Ist denn beim 1. Element die Klasse

.ce_accordion .toggler.active

vorhanden?

[chinagirl]

Ist denn beim 1. Element die Klasse

.ce_accordion .toggler.active

vorhanden?

du hast recht die klasse ist nicht vorhanden.
habe jetzt die richtige klasse verwendet .ce_accordion .ui-accordion-header-active und es funktioniert!

danke!

chinagirl