einblenden / ausblenden
    
HOME
BEISPIEL  HTMLCode  ZURÜCK SITEMAP  

 Text einblenden / ausblenden

In dieser simplen Form mag das Beispiel noch ein wenig verspielt erscheinen. Allerdings ist es ja durchaus ausbaufähig und zeigt die einfache Methode auf, Seiteninhalte ein- und auszublenden

Stellen sie sich das Ganze einmal mit der Darstellung von Kartenreitern als Link vor und ihnen wird deutlich, dass sie so eine Möglichkeit schaffen können, Erklärungen oder eher unwichtige Inhalte erst einmal zu verbergen, mit der Option sie dennoch anzeigen zu können. Ganz ohne Pop-Up-Window.

 18.05.2006  nun auch mit Textlinks

Klicken sie einen Button oder Textlink, um den zugehörigen Text anzuzeigen.
Nochmaliges Klicken blendet den Text wieder aus.


Zitate:



Fragen:

Hauptstadt Australiens?

Aufgabe: 4 + 4 = ?




   Erklärung

Die Textbereiche stehen in <div>-Containern, deren Eigenschaften auf 'nicht anzeigen' eingsetellt sind (display:none).

Ein Script organisiert das Einblenden / Ausblenden und funktioniert wie ein Umschalter. Beim Anklicken wird das Script "toggleMe" aufgerufen dem die ID des Bereichs übergeben wird, der ein- bzw. ausgeblendet werden soll.

Original-Script gefunden bei:
The JavaScript Source http://javascript.internet.com   Autor: Ultimater, Mr J
Modifikationen: W. Jansen



   Quellcode

CSS-Anweisungen (für den Button) im HEAD 
<style type="text/css">
<!--

input.button {
  color: #fff; background: #0034D0;
  font-size: .8em;
  font-weight:bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: solid 1px #ffcf31;
}

-->
</style>
Script im Head 
<script type="text/javascript" language="JavaScript">
<!--

function toggleMe(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;
}

//-->
</script>
Code im BODY (Umschalten mit Button) 

<input type="button" class="button"
  onclick="return toggleMe('para01')" value="Johannes Rau">

<div id="para01" style="display:none">
"schlichten, nicht streiten"
</div>


<input type="button" class="button"
  onclick="return toggleMe('para02')" value="Jupp Zupp">

<div id="para02" style="display:none">
"Eh Erna, hol mal Bier"
</div>



Code im BODY (Umschalten mit Textlink) 

<a onclick="return toggleMe('para03')" href="javascript:void(0)">
Aufgabe: 4 x 4 = ?
</a>

<div id="para03" style="display:none">
Antwort: 16
</div>



<a onclick="return toggleMe('para04')" href="javascript:void(0)">
Aufgabe: 4 + 4 = ?
</a>

<div id="para04" style="display:none">
Antwort: 4
</div>



Beim Einfügen weiterer Sektionen muss die id="para##" (im div und im Link), identisch aber von bereits verwendeten unterschiedlich sein. 


<input type="button" class="button"
  onclick="return toggleMe('para23')" value="Schweinemann">

<div id="para23" style="display:none">
Antwort: Eber
</div>



<input type="button" class="button"
  onclick="return toggleMe('para24')" value="Schweinefrau">

<div id="para24" style="display:none">
Antwort: Sau
</div>








NACH OBEN