Webentwicklung||flexibel + nachhaltig ...
Content Management||Wordpress, Joomla, Drupal
Design||modern und individuell
Service / Support||für Ihr gesundes Web!
Busines Partner||unser Angebot an Agenturen
Retina Ready||mobile Bilder + Grafiken
Mobile First||Standards + Framework
Mobile Starter||Ihr mobiles Web
User Experience||Click or Touch?
Strategien||Web-App - Responsive - Adaptive
Web-Paper Plugin||Text mobilisieren
Web-Planer||Erfolg durch Planung
WebTec||Html, CSS, ...
Einfaches Akkordeon im Joomla Beitrag
Mit einem Accordeon können Inhalte übersichtlich und gut strukturiert angezeigt werden. Typische Anwendungen im Webdesign sind FAQs oder Übersichtsseiten für Anleitungen und Ähnliches.
Für Joomla stehen dem Webdesigner zahlreiche Plugins zur Verfügung, die aber vom Inhaltsersteller das Einhalten eines festgelegten HTML Konstrukts erfordern. Das ist unbequem und überfordert viele Anwender!
Deshalb haben wir einen Joomla Override entwickelt, der Anwender sicher ist, mit beliebigen Inhaltselementen umgehen kann und einfach in Joomla zu integrieren ist. Das JQuery Framework wird von meisten Templates verwendet und ist Voraussetzung.
Funktion:
Der Inhaltsersteller setzt pro Akkordeon Tab eine Überschrift <h4>, der folgende Text mit Bildern, Listen usw. wird automatisch in den auf- und zuklappenden Container gesetzt.
Neues Beitragslayout per Override
In Erweiterungen > Templates wird mit Klick auf das aktive Template (nicht Stil) der Template Editor geöffnet. Der Tab 'Overrides erstellen' öffnet die möglichen Overrides. Hier in Komponenten die com_content > article wählen.
Jetzt ist im Editor Tab unter HTML > com_content > article ein neuer Override sichtbar. Ist es der erste Erstellte heißt er default sowie default_links und gilt für alle Beiträge. Ist bereits ein default override vorhanden ist der Name eine Kombi aus default + Datum + eindeutige Nummer. Diese neuen Dateien anklicken und dann den Button 'Datei umbenennen' klicken. Hier den gewünschten Layout Namen wählen. Bsp.: akkordeon und akkordeon_links.
Im Beitrag wird der Override im Tab 'Optionen' jetzt als alternatives Layout angezeigt und zugewiesen!
Änderungen in akkordeon.php
In Zeile 114 wird der Beitragstext geladen:
Hier folgende Änderung einfügen:
<?php echo $this->item->text; ?>
</div>
Der Tag 'h4' muss der gewählten Akkordeon Überschrift entsprechen, also dem Überschrifts Tag der vom Inhaltsersteller im Beitrag verwendet werden soll.
JQuery Script
Dieses Script kann entweder in der template.js global eingefügt werden oder besser nur für das neue Layout direkt in der akkordion.php am Ende:
<script type="text/javascript">
(function($) {
$(window).load(function(){
if ( $('.akkordeon-end').length == 0){
$('#akkordeon h4').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
}
else{
$('#akkordeon h4:not(:last-of-type').each(function(index, element){
$(this).addClass('closed').nextUntil('h4').wrapAll('<div id="collapse'+index+'" class="panel-collapse"></div>');
});
$('#akkordeon h4:last-of-type').addClass('closed').nextUntil('.akkordeon-end').wrapAll('<div id="collapse-last" class="panel-collapse"></div>');
}
$('#akkordeon h4').click(function(){
if($(this).hasClass('closed')){
$('.opened').addClass('closed').removeClass('opened').next('.panel-collapse').slideToggle('slow', function(){});
$(this).toggleClass('closed opened').next('.panel-collapse').slideToggle('slow', function(){});
}
else{
$(this).toggleClass('closed opened').next('.panel-collapse').slideToggle('slow', function(){});
}
})
// open first akkordeon tab on load //
$('#akkordeon h4:first-of-type').toggleClass('closed opened').next('.panel-collapse').slideToggle('slow', function(){});
})
})(jQuery)
</script>
Beispiel CSS:
/* akkordeon */
#akkordeon h4{cursor:pointer;padding:10px 25px 10px 10px;border:1px solid #efefef;border-radius:5px;background:#ddd;}
.panel-collapse{display:none;padding:10px 25px;border:1px solid #efefef;}
#akkordeon h4:before{content:'+ ';}
Akkordeon Ende
Um Inhalte nach dem Akkordeon einzufügen, wird dem ersten HTML Element, das ausserhalb des Akkordeons liegen soll, die Klasse 'akkordeon-end' zugewiesen
{jcomments on}