Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Accordion: steuern ob geschlossen oder geöffnet anzeigen über CSS-Klasse -> Lösung

  1. #1
    Contao-Nutzer
    Registriert seit
    21.07.2022.
    Beiträge
    1

    Beitrag Accordion: steuern ob geschlossen oder geöffnet anzeigen über CSS-Klasse -> Lösung

    Basiert auf diesem Contao Originaltemplate (4.9.x):
    j_accordion.html5

    Kurzbeschreibung:
    Mit Hilfe der CSS-Klasse accordion_closed kann erreicht werden das das Accordion geschlossen angezeigt wird.
    Dazu das Template im Ordner Templates anlegen und entsprechend modifizieren.
    Im Element Akkordeon (Umschlag Anfang) in das Feld für die CSS Klasse accordion _closed eintragen.

    Bildschirmfoto 2022-07-22 um 10.14.57.png

    Da ich das Template nicht als Anhang hochladen kann, hier als Quelltext.

    HTML-Code:
    <script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
    <script>
      jQuery(function($) {
        var options = {
          heightStyle: 'content',
          header: '.toggler',
          collapsible: true,
          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);
          }
        }
        if ($(".ce_accordion.accordion_closed").length > 0) {
           options.active = false;
        }
        $(document).accordion(options);
      });
    </script>

  2. #2
    Contao-Nutzer
    Registriert seit
    23.03.2022.
    Beiträge
    1

    Daumen hoch

    Vielen Dank!!!

  3. #3
    Contao-Fan Avatar von Stefko
    Registriert seit
    25.10.2012.
    Ort
    Karlsruhe
    Beiträge
    771
    User beschenken
    Wunschliste

    Standard

    Ahoi,

    noch einfacher geht es, wenn Du nach der Zeile
    Code:
    collapsible: true,
    eine weitere mit
    Code:
    active: false,
    einfügst
    Grüße, Stefko

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •