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 }