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
Kommentare
http://go-lux.de/one-page
Menu Eintrag 'Accordion im Einleitugstext'.
Gutes Gelingen wünscht Gerno!
merci für den Hinweis!
Da war tatsächlich ein Tipfehler drin, jetzt ist der Teil der Anleitung für Content nach dem Accordion wieder sichtbar:
Accordion Ende
Um Inhalte nach dem Accordion einzufügen, wird dem ersten HTML Element, das ausserhalb des Accordions liegen soll, die Klasse 'accordeon-end' zugewiesen
ich würde gerne die erste Ebene des Akkordeons beim Aufrufern der Seite aufgeklappt haben.
Wäre dies möglich und wie?
Vielen Dank für die Hilfe.
Die Sliderfunktion wird dadurch zwar nicht beeinträchtigt, Das Accordion endet aber leider auch nicht. Wie habt ihr das gelöst?
Danke für Feedback
SoHo
danke für die schnelle Antwort!
Leider hat das auch nicht funktioniert. Ich habe in der accordion.php "akkordion-end" gegen "akkordeon-end" getauscht und im Beitrag die Klasse akkordeon-end zugewiesen - . Der Slider funktioniert dann leider gar nicht mehr. Wenn ich die Klasse wieder entferne, ist alles gut, nur das Slider-Ende funktioniert natürlich dann auch nicht.
LG
SoHo
dazu bitte eine Zeile in das JQuery Script hinzufügen, fast am Ende nach:
else{ $(this).addClas s('closed').rem oveClass('opene d').next('.pane l-collapse').sl ideToggle('slow ', function(){});
}
})
neu:
$('#akkordeon h4:first-of-typ e').toggleClass ('closed opened').next(' .panel-collapse ').slideToggle( 'slow', function(){});
Ist auch im Script hier hinzugefügt!
zitiere Rippchen:
vielen herzlichen Dank! Das Menü klappt prima und hilft unseren Selbsthilfegrup pen sehr, während der Coronavirus-Kri se die Übersicht über Hilfsangebote zu behalten.
super dein Akkordeon!
Ich habe nur ein Problem. Wenn ich nach einem akkordeon-end normalen sichtbaren Text im Beitrag einfüge funktioniert das gut. Aber wenn ich danach wieder ein neues Akkordeon einfügen, dann wird der darüberliegende Text dem letzten Akkordeon darüber zugeschlagen.
Super Artikel.
Habe jedoch das gleiche Problem wie #12 Klaus,
das ganze funktioniert super im Firefox jedoch nicht im Microsoft edge. @Klaus ist das bei dir auch so?