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
Umgang mit "sticky header"
Hallo zusammen,
ich habe in einer Conto 3.5er-Installation nanos Ansatz von weiter oben in diesem Thread angewendet, und zwar zum Springen von außen in ein Accordeon, und das funktioniert auch soweit super.
Jetzt habe ich das spezielle Problem, dass ich einen "sticky header" in der Website verwende, also ein per Position:fixed oben im Layout fixiertes Element habe, das die ganz oben liegenden Elemente im Content-Bereich überlappt. Beim Sprung in ein Akkordeon-Element sind daher der Toggler sowie die ersten Zeilen des Inhalts verdeckt.
Habt Ihr dafür einen Lösungsansatz?
Kann ich beispielsweise dem Sprung platt gesagt etwas Spiel mitgeben und irgendwo +100px hinzurechnen?
Wenn ja, wie geht das? :eek:
Hier nochmal der Code, der für den Sprung im j_accordeon.html5 hinzugefügt wurde:
HTML-Code:
// Über Anker-ID direkt anspringen
$('div.toggler').each(function() {
if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) {
$(this).click();
}
});
Danke!
Was muss man umstellen dass es über die Nachrichten auch geht?
Hallo Community,
Erstmals vielen herzlichen Dank an Andreas für die geniale Umsetzung des direkt Anspringen der Accordion.
Bei normalen Accordions funktioniert dies wunderbar.
Ich habe nun die Hürde, dass ich für die "News" Accordions eingebaut habe. Mit der verlinkung springen diese zwar zum gewünschten Akkordeon, geöffnet werden diese aber nicht.
ich nehme an, dass dies an der Struktur der Nachrichten liegt, welche ich mit Modulen (nachrichtenloser, nachrichtenarchive etc. )zusammen gebaut habe.
Weiss jemand wie und wo man bei den Nachrichten das Accordion via hash link auch zum öffnen bringen kann. Ich habe schon ziemlich einiges ausgetestet, leider erfolglos.
Testseite:
http://marinobeleffi.ch/index.php/login.html
User: Max
PW: miraqulix
http://marinobeleffi.ch/index.php/aktuelles.html
Im zweiten Accordion habe ich einen Testlink eingesetzt.
Das news_full.html5 template habe ich folgend zu Accordions umgebaut.
PHP-Code:
<div class="toggler"<?php if ($this->headlineStyle): ?> style="<?php echo $this->headlineStyle; ?>"<?php endif; ?>>
<p class="info"><?php echo $this->date; ?> <?php echo $this->author; ?> <?php echo $this->commentCount; ?></p>
<?php if ($this->hasMetaFields): ?>
<?php endif; ?> <h5><?php echo $this->headline; ?></h5>
</div>
<div class="layout_latest block<?php echo $this->class; ?>"><div class="accordion">
<?php if ($this->addImage): ?>
<div class="image_container<?php echo $this->floatClass; ?>"<?php if ($this->margin || $this->float): ?> style="<?php echo trim($this->margin . $this->float); ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php echo $this->attributes; ?> title="<?php echo $this->alt; ?>">
<?php endif; ?>
<img src="<?php echo $this->src; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>" />
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<div class="caption"><?php echo $this->caption; ?></div>
<?php endif; ?>
</div>
<?php endif; ?>
<p class="teaser"><?php echo $this->teaser; ?></p>
<?php if ($this->text): ?>
<p class="more"><?php echo $this->more; ?></p>
<?php endif; ?>
</div>
<div>
</div>
</div>
Ich hoffe jemand kann mir dabei weiterhelfen.
Contao 4.10 über einen LINK Accordion direkt anspringen und aufklappen (j_accordion)
Hi Leute,
auf einer Unterseite "domain.de/unterseite" sind mehrer Accordions.
Auf der Startseite "domain.de" sind mehrere Links, die auf der Unterseite entsprechende Accordions direkt ansprechen und öffnen sollen.
Wie lässt sich das Ganze in Contao 4.10 aktuell umsetzen?
Mein aktuelles Template j_accordion.html5:
HTML-Code:
<script src="<?= TL_ASSETS_URL ?>assets/jquery-ui/js/jquery-ui.min.js"></script>
<script>
jQuery(function($) {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler',
collapsible: true,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler').attr('tabindex', 0);
}
});
});
</script>
Die Navigation auf der Startseite:
HTML-Code:
<nav class="card_nav">
<ul>
<li><a href="{{link_url::155}}#lrv_1361">Accordion 1</a></li>
<li><a href="{{link_url::155}}#lrv_1450">Accordion 2</a></li>
<li><a href="{{link_url::155}}#lrv_1456">Accordion 3</a></li>
<li><a href="{{link_url::155}}#lrv_1459">Accordion 4</a></li>
<li><a href="{{link_url::155}}#lrv_1462">Accordion 5</a></li>
</ul>
</nav>
