Akkordeons eignen sich als Design- bzw. UI-Elemente, um den Benutzer auf wichtige Inhalte zu lenken, ohne beschreibende oder weiterführende Inhalte sofort zur Verfügung zu stellen, aber diese dennoch mit wenig (Zeit-)Aufwand bereitzustellen.

Zur Umsetzung als Inline-Akkordeon (im Fließtext einzubauen) müssen bspw. folgende Stellen erweitert werden:

• Template
• Javascript
• CSS

Generiert wird das Akkordeon im Typoscript des Main-Templates:

lib.stdheader {
    ...
    # Vererbung von H3:
    91 < .3
    91.fontTag = <h3 class="inlineAccordionToggler">|</h3><div class="inlineAccordionElement">
    ...
}
tt_content.stdWrap {
    ...
    outerWrap = |</div>
    outerWrap.stdWrap.if.equals = 91
    outerWrap.stdWrap.if.value.field = header_layout
}

Dadurch werden Inhaltselemente vom Überschriften-Typ 91 mit einer CSS-Klasse und einem umhüllenden DIV ausgestattet. Die CSS-Klasse hinterlegen wir im eingebundenen Stylesheet:

.inlineAccordionToggler {
    color:#ff7713;
    padding:8px 0;
    margin:0;
    cursor:pointer;
    font-weight: normal;
}
.inlineAccordionActiveToggler {
    font-weight: bold !important;
}
.inlineAccordion {
    border:1px solid #e4e4e4;
    border-width:1px 0;
    margin-bottom:-1px;
    font-size:1em;
}

Momentan kann das Akkordeon aber noch nicht verwendet werden. Dafür muss der Überschriften-Typ 91 per TCEFORM definiert werden:

Web | List | Home => bearbeiten
Ressourcen-Tab => TypoScript-Konfiguration:
TCEFORM.tt_content.header_layout.addItems {
    91 = Inline-Akkordeon
}

Nun kann als Überschriften-Typ Inline-Akkordeon gewählt werden.

Jetzt fehlt lediglich noch die Javascript-Funktionalität, um das Auf- bzw. Zuklappen bereitzustellen. Bei Verwendung von jQuery könnte das dann so aussehen:

jQuery(document).ready(function(){
    ...
    init_inlineAccordion();
    ...
}
function init_inlineAccordion() {
    var togglers = $('.inlineAccordionToggler');
    if (togglers.length > 0) {
        /**
         * neues Div mit class="inlineAccord" erstellen ..
         * .. und um toggler herum in DOM einfuegen
         */
        $('.inlineAccordionToggler, .inlineAccordionElement').wrapAll('<div class="inlineAccordion"></div>');
        var allPanels = $('.inlineAccordionToggler + .inlineAccordionElement').hide();

        $('.inlineAccordion > .inlineAccordionToggler').click(function() {
            var $this = $(this),
                contentItem = $this.next();
            allPanels.slideUp();
            togglers.removeClass('inlineAccordionActiveToggler');
            if (contentItem.css('display')==='none') {
                // Inhalt einblenden:
                contentItem.slideDown();
                $this.addClass('inlineAccordionActiveToggler');
            }
              return false;
        });
    }
}

Unter Prototype hilft folgendes Snippet:

window.IBSEfehse = {
    inlineAccordion_currentItem: false,
    inlineAccordion_init: function() {
        var togglers = $$('.inlineAccordionToggler'),
            myAccordion = this;
        if (togglers.length > 0) {
            togglers.each(function(toggler,idx){
            myAccordion.inlineAccordion_hideContent(toggler);
                toggler.on('click', function(evt){
                    if (myAccordion.inlineAccordion_currentItem!==false) {
                        if (myAccordion.inlineAccordion_currentItem!==toggler) {
                            myAccordion.inlineAccordion_hideContent(myAccordion.inlineAccordion_currentItem);
                            myAccordion.inlineAccordion_showContent(toggler);
                            myAccordion.inlineAccordion_currentItem = toggler;
                        } else {
                            myAccordion.inlineAccordion_hideContent(toggler);
                            myAccordion.inlineAccordion_currentItem = false;
                        }
                    } else {
                        myAccordion.inlineAccordion_showContent(toggler);
                        myAccordion.inlineAccordion_currentItem = toggler;
                    }
                });
            });
        }
    },
    inlineAccordion_hideContent: function(link){
        var container = link.up(0);
        container.childElements().invoke('hide');
        link.show();
    },
    inlineAccordion_showContent: function(link){
        var container = link.up(0);
        container.childElements().invoke('show');
        this.inlineAccordion_currentItem = link;
    }
};
Event.observe(window, 'load', function() { IBSEfehse.inlineAccordion_init(); });

Das kann in einer bestehenden js-Datei eingearbeitet werden oder separat mittels page.includeJS im TypoScript:

page.includeJs {
    file = xyz.js
}