5.3.44 Legacy-Elemente Akkordeon vs Akkordeon

[Schnippel]

Hi Leute,

bei den Elementtypen gibt es 2 Arten von Akkordeon
a) Akkordeon
b) Legacy Akkordeon

Welche Version sollte man einsetzen?

Wie kann bei dem Akkordeon (a) alles so eingestellt werden, daß das Akkordeon generell geschlossen ist?
Und wie kann das Akkordeon nach dem öffnen auch wieder geschlossen werden? Bisher hatte ich einen .toggler dazu.
Was muß ich wie einstellen?

Müssen Templates geändert werden? Wenn ja, was?

Im Bild zu sehen ist die Akkordeon-Bezeichung (rot). Wie kommt man diese auf den eigentlichen Akkordeon (blau) drauf?
Unbenannt-1.jpg

[zoglo]

Hi Leute,

bei den Elementtypen gibt es 2 Arten von Akkordeon
a) Akkordeon
b) Legacy Akkordeon

Welche Version sollte man einsetzen?

Wie kann bei dem Akkordeon (a) alles so eingestellt werden, daß das Akkordeon generell geschlossen ist?
Und wie kann das Akkordeon nach dem öffnen auch wieder geschlossen werden? Bisher hatte ich einen .toggler dazu.
Was muß ich wie einstellen?

Müssen Templates geändert werden? Wenn ja, was?

Im Bild zu sehen ist die Akkordeon-Bezeichung (rot). Wie kommt man diese auf den eigentlichen Akkordeon (blau) drauf?
Unbenannt-1.jpg

Legacy fliegt in Contao 6 raus. Du solltest das neue Akkordeon nutzen.
Für die anderen Fragen gibt es hier bereits einige Antworten, was genau funktioniert mit Variante a nicht, gibt es Beispiele?

[mlweb]

An Hand von Screenshots kann man leider kaum Fehler beurteilen/finden. Also bitte einen Link zur Seite posten.

[derRenner]

Möglicherweise hast du das Konzept des Inhaltselementes Akkordeon noch nicht korrekt durchschaut.

Du legst ein Inhaltselement Akkordion an.
Hier hast du im Bereich 'Akkordeon-Einstellungen' die Möglichkeit das Häkchen zu setzen, damit mal alle Akkordeons geschlossen dargestellt werden.

Jetzt klickst du mit dem Icon 'Kindelemente bearbeiten' in die Inhalte rein: hier kannst du deine Inhaltselement pflegen.
Jedes der Inhaltselemente hat wiederum eine 'Bereichsüberschrift' die den Toggler im Frontend darstellt.
Und unter Elementtyp wählst du dann dein zu pflegendes Inhaltselement aus.

Schau dir dazu auch mal die Onlinedemo an
https://demo.contao.org/accordion.html
https://demo.contao.org/contao/

Ich glaube, dass das Schliessen der offenen Akkordeon-Elemente automatisch beim Öffnen eines anderen Akkordeon-Elementes passiert. Ansonsten müsstest du mit z.B. Javascript mal mit eingreifen.

[Schnippel]

Hallo Leute,

vielen Dank für eure Hilfe. Ich bin da jetzt schon ein paar Schritte weiter.

Nun stehe ich bissl vor dem dem Problem, daß mein CSS nicht so richtig funktioniert.

Ich möchte, daß im geöffnetem Zustand eines Akkordeons, der Balken / Toggler einen dunklen Hintergrund hat, wie im Bild rechts zu sehen.
Dieser Zustand entsteht aber erst, wenn man ausßerhalt des Fensters klickt und nicht automatisch beim Öffnen.
Im Bild links ist der Zustand, der aktuell angezeigt wird.

Hier das Bild:

Unbenannt-3.jpg


Hier ist der Link zur Website


Als Vergleich hier das alte Legacy-Akkordeon. So soll es reagieren.

Wo muß ich da noch was anpassen?

[dirksche]

Hallo liebes Community,

ich will nun auch das neue Akkordeon Element nutzen, verzweifle aber am hinzufügen eines Subline Eingabefeldes unter der Bereichsüberschrift. Beim alten Element hat das noch funktioniert.

So sieht meine angepasste DCA unter contao/dca/tl_content.php aus:

<?php

use Contao\ContentModel;
use Contao\CoreBundle\DataContainer\PaletteManipulator;
use Contao\DataContainer;
use Contao\Input;

$GLOBALS['TL_DCA']['tl_content']['fields']['sectionSubtitle'] = [
    'label'     => &$GLOBALS['TL_LANG']['tl_content']['sectionSubtitle'],
    'exclude'   => true,
    'inputType' => 'text',
    'eval'      => ['maxlength' => 255, 'tl_class' => 'w50 clr'],
    'sql'       => "varchar(255) NOT NULL default ''",
];

$GLOBALS['TL_DCA']['tl_content']['config']['onload_callback'][] = ['tl_content_section_subtitle', 'addFieldToNestedAccordionPalettes'];

class tl_content_section_subtitle
{
    public function addFieldToNestedAccordionPalettes(DataContainer $dc): void
    {

        $act = Input::get('act');
        if (!\in_array($act, ['create', 'edit'], true)) {
            return;
        }

        $parentId = null;

        if ($act === 'edit') {
            if (!$dc->id) {
                return;
            }

            $child = ContentModel::findByPk($dc->id);
            if (!$child || $child->ptable !== 'tl_content') {
                return;
            }

            $parentId = (int) $child->pid;
        } else {
            // create
            if (Input::get('ptable') !== 'tl_content') {
                return;
            }

            $parentId = (int) Input::get('pid');
        }

        if (!$parentId) {
            return;
        }

        $parent = ContentModel::findByPk($parentId);
        if (!$parent || $parent->type !== 'accordion') {
            return;
        }

        $palettesToPatch = ['default'];

        if ($act === 'edit' && isset($child) && $child) {
            $palettesToPatch[] = $child->type;
        } elseif ($act === 'create' && Input::get('type')) {
            $palettesToPatch[] = (string) Input::get('type');
        }

        $palettesToPatch = array_unique($palettesToPatch);

        foreach ($palettesToPatch as $paletteName) {
            if (!isset($GLOBALS['TL_DCA']['tl_content']['palettes'][$paletteName])) {
                continue;
            }

            $palette = (string) $GLOBALS['TL_DCA']['tl_content']['palettes'][$paletteName];

            if (strpos($palette, 'sectionHeadline') === false) {
                continue;
            }

            if (strpos($palette, 'sectionSubtitle') !== false) {
                continue;
            }

            $GLOBALS['TL_DCA']['tl_content']['palettes'][$paletteName] =
                str_replace('sectionHeadline', 'sectionHeadline,sectionSubtitle', $palette);
        }
    }
}

Und unter contao/languages/de/tl_content.php:

<?php
$GLOBALS['TL_LANG']['tl_content']['sectionSubtitle'] = ['Untertitel', 'Wird unter der Überschrift angezeigt.'];

Im Backend wird aber das Feld nicht angezeigt. Hat jemand eine Idee?

Danke für die Antworten