Mit dem Accordion-Modul aus dem Divi-Theme lassen sich Websites übersichtlich strukturieren. Die einzelnen Accordion-Inhalte lassen sich aber auch über einen Link direkt öffnen. Das ist eine nette Dienstleistung an Ihre Website-BesucherInnen.
Zunächst braucht es einen neuen Codeblock im <head> Ihrer Website. Fügen sie diesen ein unter Divi/Theme-Optionen/Integration/Code dem < head > Ihres Blogs hinzufügen:
<script>
jQuery(function($) {
setTimeout(function(){
var query = window.location.search.substring(1);
var params = query.split('&');
var accordion_id = '';
var toggle_id = '';
for (var i = 0; i < params.length; i++) {
var param = params[i].split('=');
if (param[0] !== undefined && param[1] !== undefined) {
param[1] = decodeURIComponent(param[1]);
if (param[0] === 'ao' && /^[a-zA-Z0-9]+$/.test(param[1])) {
accordion_id = param[1];
}
if (param[0] === 'ai' && /^d+$/.test(param[1])) {
toggle_id = param[1];
}
}
}
if (accordion_id !== '' && toggle_id !== '') {
$('#'+accordion_id+'.et_pb_accordion .et_pb_toggle:nth-of-type('+toggle_id+') .et_pb_toggle_title').trigger('click');
}
}, 100);
});
</script>Soweit die Vorarbeit. Jetzt wie’s weitergeht:
- Nun öffnen sie den Post oder die Seite mit dem fraglichen Accordion. In dessen Erweitert- (oder Advanced-)Einstellungen wählen Sie «CSS-ID und Klassen» aus. Unter CSS-ID vergeben Sie eine sinnvolle ID für das ganze Accordion. Sagen wir mal, dass sich in Ihrem Accordion mehrere Abschnitte von Geschäftsbedingungen verbergen, so wäre vielleicht «conditions» ein gute Begriff. Speichern Sie das ganze und vergessen Sie nicht, auch die Seite (oder den Beitrag) zu aktualisieren.
- Nun gehen Sie an jene Stelle, an der Sie den Direktlink auf das Accordion einfügen möchten.
- Dort fügen Sie den Link der Accordion-Seite ein und ergänzen ihn um einige Angaben. Etwa so:
https://ihredomain.ch/seite-mit-accordion/?ao=conditions&ai=3
- Dieser Link würde die Seite mit Ihrem Accordion ansteuern und den 3. Inhalt dessen anzeigen. Sowohl den ao-Wert wie auch den ai-Wert müssen Sie natürlich Ihren Gegebenheiten anpassen; ebenso den Domain- und Seitennamen.
Praktisch. Oder?
Accordion-Link mit Anker ergänzen
Nun befindet sich aber vielleicht Ihr Accordion nicht sonderlich weit oben auf besagter Seite. Dann kann es sein, dass zwar der richtige Inhalt öffnet – BesucherInnen ihn aber trotzdem erst nach Scrollen finden. Das ist eine Fingerübüng:
- Ergänzen Sie Ihren Link von oben mit einer Ankermarke auf das Accordion. In unserem Beispiel etwa so (beachten Sie den ergänzten Part am Schluss in rot):
https://ihredomain.ch/seite-mit-accordion/?ao=conditions&ai=3#conditions - Nun öffnet der Link das Accordion und springt direkt an die richtige Stelle der Website.
Einer meiner Lieblings-Hacks.
Wenn das Accordion knapp verfehlt wird
Ab und an kommt es vor, dass ein Ankerlink den gewünschten Inhalt nicht ganz korrekt trifft. Das kann leicht behoben werden. Beachten Sie dazu zwei frühere Tricks:
Werbung
Werbung
