Informationen werden auf einer Seite via Accordion übersichtlich dargestellt. Auf Knopfdruck können die einzelnen Abschnitte komplett ein- oder ausgeklappt werden. Soweit, sogut. Allerdings soll nun diese Einstellung dauerhaft beibehalten werden. Der Weg zur Lösung könnte daher eine Session-Variable sein. Nur, wie soll der Wert via Javascript an php übergeben werden?
Beginnen wir bei der php-Session-Variable, nennen wie sie showTabs
. Damit kann schon einmal die Schaltfläche zum Auf- und Zuklappen gesteuert werden:
<?php if($_SESSION["showTabs"] == "closed") { echo '<p><a href="#" onclick="expand();">Alles anzeigen</a></p>'; echo '<p style="display: none;"><a href="#" onclick="closed();">Alles schließen</a></p>'; } else { echo '<p style="display: none;"><a href="#" onclick="expand();">Alles anzeigen</a></p>'; echo '<p><a href="#" onclick="closed();">Alles schließen</a></p>'; } ?>
Nun das eigentliche Problem: Die Übergabe des neuen Wertes an PHP ohne Seitenreload. Was für ein Glück, dass mittels jQuery und Ajax schnelle Posts übergeben werden können. Der neue Sessionwert wird einfach an ein PHP-Skript geschickt:
$.post("session.php", { new_session:"expand"} );
Im Einzelnen werden also in den JS-Funktionen zunächst alle Inhaltsbereiche angezeigt (show
) oder verborgen (hide
) und die entsprechende Schaltfläche ein- bzw. ausgeblendet. Im Anschluss erfolgt die Übergabe des neuen Sessionwertes. Die Javascript-Funktionen lauten somit:
function expand() { $('#accordion .ui-accordion-content').show(); $('.accordion-expand-closer').show(); $('.accordion-expand-opener').hide(); $.post("session.php",{ new_session:"expand"} ); } function closed() { $('#accordion .ui-accordion-content').hide(); $('.accordion-expand-closer').hide(); $('.accordion-expand-opener').show(); $.post("session.php",{ new_session:"closed"} ); }
Das PHP-Skript macht nun nichts anderes, als den Übergabewert in die Session zu schreiben:
<?php session_start(); $_SESSION["showTabs"] = $_REQUEST["new_session"]; ?>
Bleibt noch eine Sache: Nach Wiederaufruf der Seite wird bislang nur die Schaltfäche angepasst. Die Komplettanzeige muss also nun noch via Javascript gesteuert werden, d.h. mit PHP wird eine entsprechende Zeile ergänzt:
<?php if($_SESSION["showTabs"] == "expand") echo "$('#accordion .ui-accordion-content').show();"; ?>
Fertig!
wo ist der Akkordion ?
Hallo, das Accordion war als Anwednungs-Beispiel für den Code-Schnipsel gedacht. Verwendet wurde hierbei die Accordion-API von jQuery. Weitere Infos dazu gibt es unter https://jqueryui.com/accordion/ und https://api.jqueryui.com/accordion/