Druckbare Version
Hallo zusammen,
bin schon lange mit einer Problemlösung beschäftigt und habe auch diverse Lösungen ausprobiert:
In diesem Fall habe ich die Accordionfunktion gewählt und mehrere Accordionbeiträge erstellt.
Leider ist es jetzt so, dass der erste Inhalt eines Accordions immer sichtbar ist. Dieser soll aber erst sichtbar werden, wenn ich mit mit der Maus drübergehe und klicke.
Kann mir jemand helfen? Danke im Voraus!
dankeschön. Hat funktioniert. Man sollte doch ab und an wieder im Handbuch lesen.
Hallo,
ich habe das Accordion template auch geäbdert, konnte aber den Erfolg nicht sehen, d..h das erste ist immer noch geöffnet.
Weder die Kopie des mootools templates, noch die Anpassung im Original bringt mich weiter.
Wer kann helfen!
Liebe Grüße
Gisela Maja
maja340@gmail.com
Hi.
Hast du nach Anpassung mal den Contao Cache geleert? (Systemwartung)
Ansonsten müsste man das Problem, wie fast immer... mal sehen. ;)
Gruß
Thomas
Seite ist noch lokal, hier mein Code:
Code:window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
display: false,
opacity: false,
alwaysHide: true,
onActive: function(toggler, elem) {
elem.setProperty('aria-hidden', 'false');
toggler.addClass('active');
toggler.getNext('div').setStyle('visibility', 'visible').fade('in');
toggler.setProperty('aria-expanded', 'true');
return false;
}
Liebe Grüße
Gisela
In 2.10 haben sich die Templates geändert.
Nimm also ne Kopie vom original Templates.
Zitat von Nina in einem anderem Thread dazu
Habe mich aber damit noch nicht näher beschäftigt.Zitat:
Soweit ich weiß, musst du dieser Anleitung auch gar nicht mehr folgen, weil seit Contao 2.10 der Akkordeon-Code sowieso um weitere Klassen erweitert wurde.
Das Akkordeon reagiert seit Contao 2.10 mit diesen Klassen an der relevanten Stelle:
.toggler (geschlossen)
.hover (hover/fokus)
.active (offen)
Die .toggler-Klasse ist in jedem Status verfügbar, so dass man da die Basisanweisungen reinschreiben kann; die anderen Klassen ergänzen sich dann je nach Status so dass man damit die .toggler-Anweisungen überschreiben kann.
Hallo Community,
ich möchte das Thema nochmal aufgreifen, weil ich es nach Stunden der Suche einfach nicht schaffe, das erste Akkordeon geschlossen zu halten.
Ich habe 2.11.2 mit Mootools-Paket 1.4.5 und habe im Template display: false und display: -1 ausprobiert. Habe auch alle Threas gelesen, die ich finden konnte. Liegt die Lösung bei der Anmerkung von Nina? Aber was heißt das konkret? Hat jemand einen Tipp?
Bei einer anderen Seite, die noch nicht produktiv ist, klappt es ohne Probleme (Version 2.11.0 mit 1.4.4), ich habe die Dateien mal übernommen, aber es tat sich auch nichts.
Ich habe den Versuch mal auf sichtbar gestellt: http://www.typofisch.de/index.php/showroom.html
Danke für Eure Unterstützung,
Marion
Mein Template hier (Contao 2.11.3). Das funzt.
Code:<script>
(function($) {
window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
display: false,
alwaysHide: true,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>
Ich habe bei mir (2.11.2) -1 drin, damit funktioniert es:
Code:opacity: false,
display: -1,
alwaysHide: true,
Hallo, Ihr beiden,
vielen Dank für die Hinweise, aber es tut sich leider nichts. Habe jetzt im Quelltext gesehen, dass das display: -1 gar nicht in den JS-Code übernommen wird. Was könnte das bedeuten? Ich kenne mich da nicht so aus.
Danke für Unterstützung,
Marion
Bist du sicher, dass im Seitenlayout das richtige Modul angekreuzt ist?
Ähem,
der Fehler lag woanders: Ich hatte von 2.7 auf 2.11 upgedatet, früher XHTML als Ausgabeformat eingestellt, jetzt auch wieder, aber HTML5-Templates verwendet. Ich weiß zwar nicht, warum er dann überhaupt die fe_page.html5 genommen hat, aber die moo_accordions.html5 wollte er nun nicht. Leider geht es gerade auch nicht, das Ausgabeformat einfach auf .html5 umzustellen, da kommt dann eine Fehlermeldung, dass es Probleme mit der Endung gibt.
Danke nochmal, Jubel
Marion
also ich möchte das auch so einbinden und wollte das template jetzt ändern, aber ich sehe nur moo_accordion.html5 und moo_accordion.xhtml und wenn ich das erste auswähle und ein neues template erstelle, kommt doch auch nur moo_accordion.html5 raus und nicht .tpl oO
was mach ich denn da falsch?!? :o weiß das jemand??? oder ist das doch das richtige?
LG Franzi
Wenn Du V.2.11 verwendest ist das richtig so. Es gibt nun 2 verschiedene ... da gibt es .xhtml was früher Standard war (bis 2.9.5) und .tpl (*TypolightTemplate) hies. Zusätzlich kam ab 2.10 html5 Kompatibilität dazu. Damit man die unterscheiden kann, hat man sie .xhtml & html5 benannt. in der 2.10 serie, gab es da noch alle3. Im 2.11 wurde .tpl definitiv verbannt.
Das Ausgabeformat kannst Du im Seitenlayout unter Experten Einstellungen ändern. Html=html5 Rest ist selbst sprechend.
Kann es nachvollziehen wenn neuere User da ein bisschen ein durcheinander kriegen, wenn sie in alten Anleitungen rum wuseln ;-)
*manchmal glaubt man Sachen zu wissen und unterlässt das "sich vergewissern". Aber zum Glück sind wir ja eine Community wo Sachen richtig gestellt werden ;-)
thx joe!
Wo hast du das denn her? Dachte .tpl steht für Template wie es in vielen anderen Systemen auch der Fall ist :) Zu dem hies das Typolight :)Zitat:
.tpl (Tipolight)
vg Joe
Hallo Leute
Ich hatte das Problem auch, dass es "display: -1," nicht angenommen hat.
Es hat nie geklappt bis ich auf die komische Idee kam, Die Daten bereinigen.
Das heisst:
Unter -> Sytemwartung -> Daten bereinigen -> alles auswählen und bereinigen.
Dann hat es ohne was zu ändern super funktioniert.
Könnte ein Versuch wert sein, wenns nach allem nicht klappt.
Grüsse Marco
Tja, tatsächlich ... erst, nachdem ich auch das gemacht habe, hat es geklappt :DZitat:
Zitat von MacPix
Danke
In Contao 3 ist ja das Accordion auf jQuery basis dazu gekommen. Dort funktioniert es leider nicht im j_accordion.html Template mittels
display: -1,
alwaysHide: true,
die Accordions geschlossen zu halten.
Weiß jemand von Euch wie es dort gemacht werden könnte??
Danke im Vorraus...
Super, mit den Optionen:
collapsible: true,
active: false,
geht es!
Hallo,
nun wollte auch ich das Akkordeon das 1.Mal verwenden.
Ich verwende Contao 2.11.5 mit HTML5 als Ausgabeformat.
Habe dazu bei Artikel einer Seite 2 Akkordeons als Einzelnes Element mit Lorem Text und Überschrift eingefügt.
Das moo_accordion.html5 wurde im Layout ausgewählt.
Jedoch werden im Frontend nur die 2 Texte angezeigt.
Nichts mit auf- und zuklappen.
Daher für Laien: was habe ich vergessen?
Hast Du im Seitenlayout einen Haken bei moo_accordion gesetzt?
Ok, hat sich erledigt. auf die einfachste nDinge kommt man manchmal nicht.
Da ich jQuery und MooTools laden aktviert habe, muss ich natürlich auch das jquery_nc-Template aktivieren.
Ich habe das noch ein Problem, ich habe das Template geändert wie beschriebenZitat:
Zitat von opcode
Oder ist evtl. das letzte Komma hinter "false" zu viel?Code:(function($) {
$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
collapsible: true,
active: false,
});
Um ganz sicher zu gehen habe ich die beiden Templates "j_accordion.xhtml" und "j_accordion.html5" geändert, im Quelltext der Seite steht aber immer noch
Warum überschreibt denn meine Änderung in den Templates nicht den Standard?Code:<script src="http://www.folklore-wiesbaden.de/assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
collapsible: true
});
Ich habe das gerade heute für ein Kundenprojekt eingerichtet und es funktioniert einwandfrei. Ich habe Dir einen Screenshot von meiner "moo_accordion.html5" angehängt. Es geht um den Eintrag hinter dem ersten "opacity:false;" und zum Laufen bringt das geschlossene Akkordeon der Eintrag "display: -1, // -1, alle Akkordeons sind am Anfang eingeklappt".
Das sollte auch mit der xhtml-Datei funktionieren. Ich habe das übrigens in Contao 3.0.6 eingerichtet.
Good luck!
Und hier ist auch der versprochene Screenshot... (zu schnell auf Antworten gedrückt):
Anhang 10517
Ich habe gerade gesehen, dass Du jQuery einsetzt. Das Akkordeon habe ich in jQuery noch nicht probiert, aber jQuery ist aktiviert für andere Funktionen. Daher empfehle ich Dir, das MooTools-Akkordeon mal auszuprobieren.
Hi,
ich nutze unter contao 3.0.6 jquery und hab das Accordion im Einsatz. Wenn du es geschlosen haben willst, nimm einfach die templates und ergänze active:false. Bei der letzten Eigenschaft kommt kein Komma.
Den Templates brauchst du keine neuen Namen geben. Löscht du die Templates, wird das Orginaltempalte wieder hergestellt.Code:$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
active:false, // first accordion closed
collapsible:true
varix
Danke für Eure Hilfe, die Templates habe ich entsprechend nach Euren Anweisungen geändert, und habe mich gewundert warum im Quelltext der Webseite keine Änderung zu sehen war. Wie ich jetzt gemerkt habe, hatte ich dem Theme keinen Templates-Ordner zugewiesen, so daß meine eigenen Templates gar nicht aktiv werden konnten. Das habe ich jetzt gemacht, und schon läufts wie geschmiert. :D
[QUOTE=varix;259750]Hi,
ich nutze unter contao 3.0.6 jquery und hab das Accordion im Einsatz. Wenn du es geschlosen haben willst, nimm einfach die templates und ergänze active:false. Bei der letzten Eigenschaft kommt kein Komma.
Hallo, ich nutze auch contao 3.0.6 jquery.Code:$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
active:false, // first accordion closed
collapsible:true
das template sieht dann so aus, aber dennoch ist der erste Reiter aufgeklappt
Wo liegt meine Fehler?
Gruß Letko
PHP-Code:<script>
(function($) {
window.addEvent('domready', function() {
new Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
active:false, // first accordion closed
alwaysHide: true,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>
Hi Letko,
hier mal mein Code:
Gruß,PHP-Code:<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
collapsible: true,
active:false
});
var activate = function(tog) {
var tgs = $('div.toggler');
tgs.removeClass('active');
tog.addClass('active');
tgs.next('div.accordion').attr('aria-hidden', 'true');
tog.next('div.accordion').attr('aria-hidden', 'false');
};
$('div.toggler').focus(function(e) {
$('div.toggler').attr('tabindex', 0);
$(this).attr('tabindex', -1);
}).blur(function() {
$(this).attr('tabindex', 0);
}).click(function() {
activate($(this));
}).keypress(function(event) {
if (event.keyCode == 13) activate($(this));
});
});
})(jQuery);
</script>
varix
hallo Varix,
hab deinen Code kopiert, eingesetzt, Cache geleert...leider ist der erste Tab immer noch offen.
http://www.petanque-bayern.de/neu/in...rgebnisse.html
Bin ratlos...
Gruß
Letko
Hallo Letko,
in dem Seitenquelltext steht:
Es müsste aber stehen:Code:
header:'div.toggler',
collapsible: true
});
var activate = function(tog) {
var tgs = $('div.toggler');
Im BE einfach jeweils das template j_accordion.html5 und j_accordion.xhtml ergänzen und speichern. So hat es bei mir funktioniert.Code:header:'div.toggler',
collapsible: true,
active:false
});
var activate = function(tog) {
var tgs = $('div.toggler');
Ahhh....hab gerade noch gesehen, dass der Code:
nicht dein jquery anzeigt.Code:<script src="assets/jquery/ui/1.9.1/jquery-ui.min.js"></script>
Auch die anderen Einbindungen:
zeigen den jquery-code nicht an.......Code:<script src="assets/js/8dcf24cb2a68.js"></script>
Hast du das template verändert?
Grüße,
varix
Hallo Varix,
das ist ein gekauftes theme von rocksolid, hab daran nix geändert. Weiß auch nicht weiter...mal sehen was der Support mir antwortet...
Vielen Grüße
Letko
Aufgrund der Länge dieses Beitrags dürfen wir kurz zusammenfassen worauf besonders zu achten ist, damit diese kleine Änderung auch mit kleinem Aufwand verbunden bleibt. Alle die also in Zukunft daran verzweifeln, dass ihre Änderung nicht übernommen wird, sollten folgendes überprüfen:
- Stelle sicher ob du MooTools oder jQuery verwendst und wähle das passende Template aus. "j_accordion.xhtml" bzw. "j_accordion.html5" bei jQuery und analog dazu "moo_accordion.xhtml" bzw. "moo_accordion.html5" bei Verwendung von MooTools.
- Wenn dein Theme einen Template-Ordner definiert, so müssen sich die Templates in diesem Ordner befinden. Beispiel: /templates/[ORDNERNAME]. Templates im Ordner /templates/ werden zwar im Backend angezeigt, würden aber nur Anwendung finden, wenn kein Template-Ordner im Theme definiert wird. Dies gilt für alle Templates, die du eventuell verändern möchtest!
- Leere bei Bedarf den Cache.
Für MooTools folge folgender kurzen Anleitung:
http://de.contaowiki.org/Accordions_...hlossen_halten
Für jQuery findest du alle nötigen Informationen bereits in diesem Thread.
Relevant ist das Hinzufügen von 'active: false'. Ohne Komma (= Syntaxfehler und macht dem IE8 Probleme).
Mit dieser Checkliste sollte die Anpassung ein Kinderspiel für euch sein.Code:$(document).accordion({
// Put custom options here
autoHeight: false,
header:'div.toggler',
collapsible: true,
active:false
});
Leider bin ich auch in der Situation, dass meine Accordions (genau genommen das erste) nicht beim Aufrufen der Seite geschlossen sind, obwohl ich genau so wie beschrieben:
http://de.contaowiki.org/Accordions_...hlossen_halten
vorgegangen bin.
Hat es vielleicht in der Version 3.4 wieder eine Änderung gegeben, so dass display: -1, nicht mehr funktioniert?
Mein Code:
PHP-Code:
<script>
(function() {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
display: -1,
alwaysHide: false
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})();
</script>
doch , das geht noch mit -1, habs grad probiert.
Interner Contao Cache gelöscht? Wird das geänderte Template überhaupt genutzt? (liegt es im richtigem Template Pfad bzw. Unterverzeichnis sofern im Theme so definiert?)