Accordion direkt anspringen und aufklappen (j_accordion)
Hallo zusammen,
falls mal jemand auch versucht Accordion direkt anzuspringen und aufzuklappen, hier meine Lösung:
1. Link erstellen "seite.html#ui-accordion-1-header-1" für das zweite Accordion header einfach hochzählen, beginnt bei NULL oder falls man mehrere Accordion auf einer Seite hat auch hier hochzahlen. Das ist die ID des Header-DIV
2. eine Kopie des Templates j_accordion anlegen und wie folgt erweitern (ganz unten, oben steht die ID noch nicht zur Verfügung)
HTML-Code:
....
}).keypress(function(event) {
if (event.keyCode == 13) activate($(this));
});
// direkt anspringen über Anker(ID)
$('div.toggler').each(function(el, index){
if (window.location.href.split('#')[1] == $(index).attr('id') && el > 0)
{
index.click();
}
});
});
})(jQuery);
</script>
Das wars schon.
Bitte Cache beachten.
Gruß Kisrten
Accordion offen lassen bis es erneut angeklickt wird
Okay, dann habe ich noch eine andere Frage. Mein Template sieht so aus:
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
heightStyle: 'content',
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() {
$('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));
});
// direkt anspringen über Anker(ID)
$('div.toggler').each(function(el, index){
if (window.location.href.split('#')[1] == $(index).attr('id') )
{ index.click(); }
});
});
})(jQuery);
</script>
Da die Accordions oft höher sind als der Viewport, passiert es (wenn man den nächsten Bereich öffnet und der vorherige Bereich sich schleßt, während die Seitenposition beim Click-Event aber beibehalten wird), dass man sich am Ende des gerade geöffneten Accordions befindet und immer hoch scrollen muss.
Um das zu verhindern, möchte ich, dass die Accordions offen bleiben wie z.B. auf der mobilen Wikipedia-Seite. Dass ein Accordion sich erst wieder schließt, wenn sein Toggler erneut angeklickt wird.
Das geht z.B. hiermit - ohne das CE Accordion:
Code:
$('.toggler').on('click', function() {
$(this).next('.content').slideToggle();
});
Wie kann ich das ins Accordion-Template einbauen, um das inhaltselement bequem mit den Wrappern nutzen zu können (und ohne z.B. die anderen Features wie die Ergänzung zur Barrierefreiheit zunichte zu machen)? Ich habe verschiedenes ausprobiert, aber dann geht ein Accordion beim Klicken zunächst immer auf und zu und erst beim zweiten Klicken auf. Kann mir jemand dabei helfen?
Viele Grüße,
Anke
Die Frage ist noch aktuell ;-)
Hallo,
ich würde gerne noch mal eine Frage auffrischen weil sie mich derzeit direkt betrifft:
Zitat:
Zitat von
Franko
Aber wie kann ich ein Accordion über einen Link auf der gleichen Seite öffnen?
Ich habe ein Akkordeon (jQuery) mit 3 Togglern auf meiner "Kontakt"-Seite integriert: Kontaktdaten, Kontaktformular, Anfahrt
Wie kann ich nun dafür sorgen, dass wenn man im 1. geöffneten Toggler ("Kontaktdaten") auf eine E-Mail-Adresse klickt... dass man dann direkt auf den 2. Toggler ("Kontaktformular") geleitet wird?
Die Lösung mit dem "seite.html#ui-accordion-1-header-1" funktioniert zum Hin- und Herspringen von Toggler zu Toggler auf einer Seite leider nicht. Oder nur bei mir nicht??
Gibt es jemanden der Franko und mir weiterhelfen kann (auch wenn dessen Beitrag schon mehr also ein halbes Jahr zurückliegt)?
Viele Grüße
Peter
JavaScript Code ausführen beim Öffnen des Accordions
Hallo zusammen,
ich sitze gerade ordentlich auf der Leitung und hoffe jemand von euch kann mir weiterhelfen. Ich verwende die Erweiterung independent_accordion und möchte JavaScript Code ausführen, wenn ein Accordion geöffnet wird - welches ist dabei egal.
Hintergrund ist folgender: Ich verwende Unveil.js (lazy load) mit JQuery 1.11 um Fotos in den verschiedenen Accordions zu laden, wenn es tatsächlich geöffnet wird, da es sich um mehrere tausend Thumbnails handelt. Es funktioniert auch alles soweit einwandfrei, außer dass wenn ich ein Accordion aufmachen die Thumbnails nicht sofort geladen werden, sondern erst wenn ich scrolle und das Script daraufhin überprüft ob die Thumbnails im sichtbaren Bereich sind.
Aktuell verwende ich folgenden Code im Head Bereich um die Thumbnails dynamisch nachzuladen:
Code:
<script>
$(function() {
$("img").unveil();
});
</script>
Genau diesen Code will ich auch ausführen, wenn ein Accordion geöffnet wird, damit man danach nicht scrollen muss um die Thumbnails zu laden.
Vielen Dank für eure Hilfe!
ITinfrastruktur
Anspringen und Aufklappen - nur wenn MooTools ausgeschaltet sind
Dank dieses threads bzw. der Anleitung aus dem Wiki klappt es auch bei mir gut, aber nur solange im Layout nicht auch MooTools eingebunden sind. Das wundert mich, denn das Template ist doch schon für "noConflict" Modus vorbereitet, warum geht es trotzdem nicht?
Ich habe einiges probiert,
Code:
<script>$.noConflict();</script>
zusätzlich im head, bringt auch nichts.
Die Akkordeons funktionieren, nur das Anspringen per Link nicht wenn MooTools mit im Spiel sind.
Wie kann man das hinbekommen?
LG
Bennie
Anspringen und Öffnen klappt mit 3.5.0 nicht
Hallo zusammen,
ich verwende schon seit längerem das obige angepasst j_accordion Script und öffne ein bestimmtes Accordion.
Mit der Version 3.4.5 klappt es, mit der Version 3.5.0 klappt das Script nicht mehr.
Hat jemand das gleiche Verhalten feststellen können?
Beste Grüße
Bojay
j_accordion ab version 3.5
Hallo,
ich habe nach langer Suche diesen Beitrag gefunden, schaffe aber leider nicht den letzten schritt.
Wie erweitere ich nun das j_accordion, damit ich einzelne bestimmtes Akkordeon über den Link mit einem hash-tag ( zB akkordeon.html#2 für das 3. Akkordeon ) öffnen kann.
Danke für eure Hilfe!
Liebe Grüße
Stefan