Contao-Camp 2024
Ergebnis 1 bis 6 von 6

Thema: contao4 Accordeons verschachteln

  1. #1
    Contao-Nutzer Avatar von tamague
    Registriert seit
    19.05.2010.
    Ort
    Klagenfurt
    Beiträge
    199

    Standard contao4 Accordeons verschachteln

    ich möchte Accordeons verschachteln

    Artikel mit
    Umschlag Anfang
    Accordeon Einzelelemente
    Accordeon Einzelelemente
    Accordeon Einzelelemente
    Umschlag Ende

    Artikel mit
    Umschlag Anfang
    Accordeon Einzelelemente
    Accordeon Einzelelemente
    Accordeon Einzelelemente
    Umschlag Ende


    wenn ich jetzt ein Accordeon Einzelelement öffnen willl, scließt der darüberliegende Umschlag . Ich nehme an an ich muß demn Einzelelmenten eine eigenen Klasse geben und das template j_accordeon dann ändern...
    ...doch wie ? .. kenn mich mit jquery nicht aus , kann mir da jemand helfen ?


    <script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></script>
    <script>
    jQuery(function($) {
    $(document).accordion({
    // Put custom options here
    heightStyle: 'content',
    header: '.toggler',
    collapsible: true,
    active: false,
    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);
    }
    });
    });
    </script>

  2. #2
    Contao-Nutzer Avatar von tamague
    Registriert seit
    19.05.2010.
    Ort
    Klagenfurt
    Beiträge
    199

    Standard

    wenn ich dem Einzelelement die Klassen subAccordion und toggler2 gebe
    und das Template j _accordion wie folgt ändere , müßte es ja theoretisch gehen ?


    <script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></script>
    <script>
    jQuery(function($) {
    $(document).accordion({
    // Put custom options here
    heightStyle: 'content',
    header: '.toggler',
    collapsible: true,
    active: false,
    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);
    }
    });

    $(".subAccordion").accordion({
    // Put custom options here
    heightStyle: 'content',
    header: '.toggler2',
    collapsible: true,
    active: false,
    create: function(event, ui) {
    ui.header.addClass('active');
    $('.toggler2').attr('tabindex', 0);
    },

    activate: function(event, ui) {
    ui.newHeader.addClass('active');
    ui.oldHeader.removeClass('active');
    $('.toggler2').attr('tabindex', 0);
    }
    });
    });
    </script>
    Geändert von tamague (10.11.2019 um 11:18 Uhr)

  3. #3
    Contao-Nutzer Avatar von tamague
    Registriert seit
    19.05.2010.
    Ort
    Klagenfurt
    Beiträge
    199

    Standard alle accordeons offen kassen

    Nachdem ich auf keinen grünen Zweig komme habe ich dank eines anderen Beitrags im Forum das Problem anders gelöst und lasse jetzt alle geöffneten accordeons offen, außer man schliesst sie manuell
    https://community.contao.org/de/show...kt-gel%C3%B6st

    Vielleicht hat jemand aber trotzdem eine Idee zum eigentlichen Problem ?

  4. #4
    Contao-Fan Avatar von fusch
    Registriert seit
    25.03.2012.
    Ort
    München
    Beiträge
    498
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Hallo,

    ein accordion ist streng genommen per Definition ein Element, das immer nur ein offenes Unterelement hat.
    Dazu gibt es noch collapsible-Elemente, deren Unterelemente unabhängig vom Zustand der anderen Unterelemente offen oder geschlossen sein können.
    Möglicherweise ist es sinnvoll, hier ein eigenes j_template.html5 (j_collapsible.html5 z.B.) anzulegen und ebenso ein dazugehöriges Content-Element.

    Vielleicht hilft Dir das hier weiter:
    https://www.w3schools.com/howto/howt...ollapsible.asp

    LG
    Hella

    Edit: Geht auch mit reinem CSS: https://alligator.io/css/collapsible/
    Mitglied des Contao User Treffen München
    Aktuelle Termine erfährst Du immer unter www.contao-bayern.de
    Komm' doch mal vorbei!

  5. #5
    Community-Moderator & Contao-Urgestein Avatar von derRenner
    Registriert seit
    23.10.2012.
    Ort
    hoRn|waldviertel
    Beiträge
    2.849
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Zitat Zitat von tamague Beitrag anzeigen
    wenn ich jetzt ein Accordeon Einzelelement öffnen willl, scließt der darüberliegende Umschlag
    Ich muss gestehen, ich habe dein Ziel noch nicht wirklich erkannt.
    Soll beim Öffnen eines zweiten Einzelelementes das vorherige offen bleiben oder sich alle anderen auch öffnen?

    Was genau meinst du mit "verschachtelt"? Denn so wie du beschreibst, sind es ja nur zwei Accordion-Elemente, die du hier anlegst ...
    Grüsse
    Bernhard


  6. #6
    Contao-Nutzer Avatar von tamague
    Registriert seit
    19.05.2010.
    Ort
    Klagenfurt
    Beiträge
    199

    Standard contao Accordeon

    Hallo
    Ich habe mehere Artikel mit jeweils einen Accordeon Umschlag zu einem Thema ( 1. Ebene)
    darin befinden sich Accordeon Einzelelemente ( 2. Ebene)
    wenn ich versuche nach dem öffnen des Elementes 1. Ebeines dieser Accordeon Einzelelemente in der 2. Ebene) zu öffnen schließt der Umschlag der 1. Ebene

    Momentan habe ich es so gelöst, daß halt alle geöffneten Element offen bleiben, (aktuell: https://www.sis-tech.at/produkte.html)

    ...bis ich oder jemand anderer ;-) eine Lösung gefunden hat

    durch diesen Zusatz in der j_accordion.html5 nach dem code active: false

    HTML-Code:
    beforeActivate: function(event, ui) {
    // The accordion believes a panel is being opened
    if (ui.newHeader[0]) {
    var currHeader = ui.newHeader;
    var currContent = currHeader.next('.ui-accordion-content');
    // The accordion believes a panel is being closed
    } else {
    var currHeader = ui.oldHeader;
    var currContent = currHeader.next('.ui-accordion-content');
    }
    // Since we've changed the default behavior, this detects the actual status
    var isPanelSelected = currHeader.attr('aria-selected') == 'true';
    
    // Toggle the panel's header
    currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));
    
    // Toggle the panel's icon
    currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);
    
    // Toggle the panel's content
    currContent.toggleClass('accordion-content-active',!isPanelSelected)
    if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }
    
    return false; // Cancels the default action
    Geändert von xchs (11.11.2019 um 16:45 Uhr) Grund: Code-Tags

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
  •