Kategorien
Design HTML/CSS

Die Mischung macht’s: CSS, JavaScript und PHP verstecken Zusatzinformationen

CSS und JavaScript ist es zu danken, dass sich Texte und Bilder ändern lassen, ohne eine Seite neu laden zu müssen. So können beispielsweise Hilfetexte und Zusatzinfos versteckt werden, die dann über einen Link sichtbar gemacht werden. Benutzer ohne JavaScript…

CSS und JavaScript ist es zu danken, dass sich Texte und Bilder ändern lassen, ohne eine Seite neu laden zu müssen. So können beispielsweise Hilfetexte und Zusatzinfos versteckt werden, die dann über einen Link sichtbar gemacht werden. Benutzer ohne JavaScript sind jedoch ausgeschlossen. Doch auch ihnen kann geholfen werden.

Neben der CSS/JavaScript-Variante lässt sich mit ein wenig PHP eine zusätzliche Möglichkeit einbauen, um versteckte Elemente per Link sichtbar zu machen – und das ohne großen Mehraufwand.

Live Beispiel im neuen Fenster

Zunächst einmal die übliche Variante, wie man sie mittels CSS und JavaScript realisiert. Dabei wird zunächst eine JavaScript-Funktion erstellt:

 function sichtbarkeit(id) {
      if(document.getElementById(id).style.display == "none")
    {
        document.getElementById(id).style.display = "inline"
      } else {
        document.getElementById(id).style.display = "none"
      }
    }

Der HTML-Bereich sieht so aus:

      <p>Hier steht ein Text, der einige Informationen enth&uml;lt.</p>

    <p><a href="#" onclick="sichtbarkeit('text1'); return
    false">Mehr Infos</a>

    <span id="text1" style="display:hidden"><br />Hier
    steht der zus&auml;tzliche Informationstext, der eigentlich unsichtbar
    ist.</span></p>

    <p>Hier steht noch ein Text.</p>

Der »versteckte« Bereich steht innerhalb einer span-Auszeichnung und erhält in diesem Fall die ID text1. Über CSS wird der Bereich mittels display:hidden versteckt.

Über einen Link wird die Funktion sichtbarkeit() aufgerufen und die ID des unsichtbaren Bereichs übergeben. Die Funktion prüft, ob die CSS-Eigenschaft auf none oder inline gesetzt ist und verändert sie.

Auf diese Weise lassen sich Informationen ohne erneutes Laden der Seite sichtbar und wieder unsichtbar machen. Wer jedoch JavaScript deaktiviert hat, muss schon in den Quelltext schauen, um den versteckten Text zu sehen.

Abhilfe kann da etwas PHP schaffen. Dazu wird ein kleiner PHP-Bereich vor dem HTML-Bereich definiert:

      <?

    $id = $_GET["id"];
    $display = $_GET["display"];

    $display_ist_text1 = "none";
    $display_soll_text1 = "inline";

    if($id == "text1" && $display == "inline") {
      $display_ist_text1 = "inline";
      $display_soll_text1 = "none";
    } else if($display == "none") {
      $display_ist_text1 = "none";
      $display_soll_text1 = "inline";
    }

    ?>

Zunächst werden im PHP-Bereich die beiden Variablen $id und $display definiert. Die Werte werden über einen Link übergeben.

Außerdem werden für jeden unsichtbaren Bereich jeweils zwei Variablen definiert. In diesem Fall sind das $display_ist_text1 und $display_soll_text1. Sie erhalten als Wert die beiden möglichen Eigenschaften der CSS-Eigenschaft display. Die Variablen werden später im HTML-Bereich eingesetzt.

Darüber hinaus wird für jeden unsichtbaren Bereich eine if-Abfrage definiert. Sie ermittelt für die entsprechende ID die neuen Werte für $display_ist_text1 und $display_soll_text1.

Der HTML-Bereich muss für die PHP-Funktionlität verändert werden:

      <p>Hier steht ein Text, der einige Informationen enth&uml;lt.</p>

    <p><a href="<? echo $_SERVER["PHP_SELF"] ?>?id=text1&display=<?
    echo $display_soll_text1 ?>" onclick="sichtbarkeit('text1');
    return false">Mehr Infos</a>

    <span id="text1" style="display:<? echo $display_ist_text1
    ?>"><br />Hier steht der zus&uml;tzliche Informationstext,
    der eigentlich unsichtbar ist.</span></p>

    <p>Hier steht noch ein Text.</p>

Der Link zum Darstellen des versteckten Bereichs erhält neben dem JavaScript-Aufruf auch noch einen gewöhnlichen Verweis. Dabei wird die Datei einfach erneut geladen und die Variablen id und display werden übergeben. Die Variable display erhält den Wert der PHP-Variablen $display_soll_text1.

Die CSS-Eigenschaft display wird über die PHP-Variable $display_ist_text1 gesetzt.

Über die if-Abfrage im PHP-Bereich wird der Wert für display geändert.

Im JavaScript-Aufruf verhindert return false, dass der voran stehende Verweis nicht ausgeführt wird. Nur bei deaktiviertem JavaScript wird der Verweis ausgeführt.

Erstveröffentlichung 28.04.2005

Von Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Eine Antwort auf „Die Mischung macht’s: CSS, JavaScript und PHP verstecken Zusatzinformationen“

Google sei Dank, habe ich den Artikel hier gefunden. Das ist genau das, wonach ich gesucht hatte – DIV sichtbar / unsichtbar schalten. Vielen Dank, das hier hat mir wirklich geholfen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.