Verwendet man ein Akkordeon, sollte es möglich sein, auf ein Element daraus direkt zu verlinken. So gehts, wenn man das „Foundation“ Framework und die TYPO3 Extension „Mask“ verwendet.

Benötigt wird ein Link, der etwa so aussieht:

<a href="https://www.site.com/page#my-accordion-header">My Accordion Header</a>

Die Doku für das Akkordeon findet man hier. Wichtig ist dieser Eintrag: data-deep-link="true"; damit wird in der URL der Hash (#) erzeugt und das Element ist direkt erreichbar (und geöffnet). Schön ist auch der Effekt von data-deep-link-smudge="true". Dieser bewirkt, dass das geöffnete Akkordeon Item vollständig und samt Überschrift im Browserfenster zu sehen ist.
Das Mask Inhaltselement in TYPO3 benötigt ein Element vom Typ „Repeating“ (Field key in diesem Beispiel: tx_mask_element) und darin 3 weitere Elemente: Überschrift (tx_mask_header), Inhalt (tx_mask_content) und Slug (tx_mask_slug). „Slug“ gibt es als vordefiniertes Feld unter „Special“. Als „Generator“ für den Slug verwendet man zweckmäßigerweise das Überschriftenfeld (tx_mask_header).

Folgendermaßen sieht das dazugehörige Template aus:

<f:if condition="{data.tx_mask_element}">
    <ul class="accordion" data-accordion data-deep-link="true" data-deep-link-smudge="true">
        <f:for each="{data.tx_mask_element}" as="data_item">
            <li class="accordion-item" data-accordion-item>
                <a href="#{data_item.tx_mask_slug}" class="accordion-title">
                    <h3>{data_item.tx_mask_header}</h3>
                </a>
                <div class="accordion-content" data-tab-content id="{data_item.tx_mask_slug}">
                    {data_item.tx_mask_content}
                </div>
            </li>
        </f:for>
    </ul>
</f:if>

Ein Link auf ein Akkordeon Element auf der Seite mit der id „123“ und der Überschrift „My Accordion Header“ sollte in der Quelltextansicht des Editors z.B. so aussehen:

<a href="t3://page?uid=123#my-accordion-header">

Das erreicht man quick and dirty indem man den Link auf die Seite im RTE wie gewohnt erzeugt und den Hash (bzw. Anker oder Slug) samt Raute „händisch“ (also in der Quelltextansicht) hinzufügt. Schöner ist es natürlich, wenn die Maskelemente im RTE ausgewählt werden können.

Linkhandler für Mask Elemente vom Typ Repeating (inline bzw. IRRE)

Dafür benötigt man einen Linkhandler. Dieser Code kommt ins TS Config:

TCEMAIN.linkHandler {
    mask {
        handler = TYPO3\CMS\Backend\LinkHandler\RecordLinkHandler
        label = Mask Elemente
        configuration {
            table = tx_mask_element
            hidePageTree = 0
        }
    }
}

Hinweis: Verwendet wird hier TYPO3 12 – bei TYPO3 11 muss die Angabe für den handler in Zeile 3 gemäß Doku geändert werden.

Damit die Maskelemente im Linkbrowser angezeigt werden, muss die TCA Definition von Mask überschrieben werden. Zu diesem Zweck legt man eine Datei an wie diese: typo3conf/ext/sitepackage/Configuration/TCA/Overrides/tx_mask.php:

<?php
$GLOBALS['TCA']['tx_mask_element']['ctrl']['hideTable'] = false;

Standardmäßig steht das nämlich auf true.

Jetzt fehlt nur noch das Typoscript:

config.recordLinks.mask {
    typolink {
        parameter = 123
        section.cObject = TEXT
        section.cObject.field = tx_mask_slug
    }
}

„123“ in Zeile 3 ist die id der Seite, auf der das Maskelement eingebunden ist. Hat man mehrere der Maskelemente auf verschiedenen Seiten im Einsatz kann man den Parameter auch flexibler definieren:

config.recordLinks.mask {
    typolink {
        parameter.cObject = TEXT
        parameter.cObject.field = pid
        ...
    }
}

Im RTE Linkbrowser findet man die Maskelemente, indem man auf den so benannten Reiter „Mask Elemente“ klickt und dann die Seite auswählt, auf der Mask Datensatz angelegt wurde.