Javascript: Verdeckte (versteckte) Textinfos oder Grafiken einblenden ausblenden aufklappen zuklappen | <noscript>...</noscript>-Bereich   


Freitag, 24. März 2023

05:01

Homepage-Tipps & -tricks für Webmaster mit Javascript

Verdeckte (versteckte) Textinfos oder Grafiken einblenden / ausblenden bzw. aufklappen / zuklappen

Das nachfolgende Beispiel kann sehr vielseitig zum Einsatz gebracht werden, sofern Javascript im Browser aktiviert ist. Sie können es beispielsweise für Ihre FAQ nutzen, um die Seite optisch kurz zu halten. Ihre Besucher decken nur die Informationen auf, die sie tatsächlich auch interessieren.

Selbstverständlich können auch für Besucher mit deaktiviertem Javascript die verborgenen Inhalte zugänglich gemacht werden. Dazu definieren Sie <noscript>...</noscript>-Bereiche, in welche Sie die entsprechenden Inhalte hinterlegen; diese werden lediglich bei deaktiviertem Javascript angezeigt!

Beispiel 1: Text aufklappen / zuklappen

Frage 1: Gibt es hier auch Homepagevorlagen?
Frage 2: Darf ich diese Vorlagen downloaden?

Beispiel 2: Grafik einblenden / ausblenden

Grafik 1 ansehen
Grafik 2 ansehen

Beim ersten Klick auf einen der Links können Sie die verdeckten Infos oder Inhalte aufklappen; beim zweiten Klick verstecken sie sich wieder!

Anweisung in der ausgelagerten Javascript-Datei "tricker.js":

function tricker(a){
  var e=document.getElementById(a);
  if(!e)return true;
  if(e.style.display=="none"){
    e.style.display="block"
  } else {
    e.style.display="none"
  }
  return true;
}

Anweisung im Html-Dokument

<html>
<head>
<title>Javascript: Text und Grafik ein- und ausblenden</title>
<script type="text/javascript" src="tricker.js"></script>
</head>
<body>
<div><a onclick="return tricker('1')" href="javascript:void(0)">
Frage 1: Gibt es hier auch Homepagevorlagen?</a></div>
<div id="1" style="display:none">Antwort: ja</div>
<div><a onclick="return tricker('2')" href="javascript:void(0)">
Frage 2: Darf ich diese Vorlagen downloaden?</a></div>
<div id="2" style="display:none">Antwort: ja</div>
<div><a onclick="return tricker('3')" href="javascript:void(0)">
Grafik 1 ansehen</a></div>
<div id="3" style="display:none"><img alt="Grafik 1" src="bild_1.jpg"></div>
<div><a onclick="return tricker('4')" href="javascript:void(0)">
Grafik 2 ansehen</a></div>
<div id="4" style="display:none"><img alt="Grafik 2" src="bild_2.jpg"></div>
</body>
</html>

Bei Hinzufügen weiterer Links mit "Aufklapp"-Informationen darf die fortlaufende Nummerierung (siehe Anweisungen oben: rote Markierungen) nicht vergessen werden!

Das könnte Sie vielleicht auch interessieren:

[ Javascript- und Noscript-Bereich definieren! ]

[ veröffentlicht am 18.08.2009 ] __________________________

zurück
 weiter



© 2007 - 2023 Copyright by homepage-vorlagen-webdesign.de | Hosted by 1&1 Internet SE

Diese Seite wurde zuletzt am 02.06.2018 17:32 aktualisiert.