<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testpage</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
<!--
function HideSpoilers( ) {
var spoilers = document.getElementsByClassName( "spoiler" );
for( var i = 0; i < spoilers.length; i++ ) {
spoilers[ i ].style.display = "none";
}
}
function PrepareSpoilerButtons( ) {
// IE ist mal wieder böse und übergibt als this nicht das element, sondern
// window... Da musst du dir selbst was überlegen, hab gerade keine Lust mehr.
var SpoilerButtons = document.getElementsByClassName( "BtnSpoiler" );
for( var i = 0; i < SpoilerButtons.length; i++ ) {
if( document.attachEvent ) {
SpoilerButtons[ i ].attachEvent( "onclick", ShowSingleSpoiler );
} else {
SpoilerButtons[ i ].addEventListener( "click", ShowSingleSpoiler, true );
}
}
}
function ShowSingleSpoiler( ) {
HideSpoilers( );
this.nextSibling.nextSibling.style.display = "block";
}
if( !document.getElementsByClassName ) { // IE kennt die Funktion nicht...
document.getElementsByClassName = function( className ) {
var all = document.getElementsByTagName( "*" ), ret = [];
for( var i = 0; i < all.length; i++ ) {
if( all[ i ].className === className )
ret.push( all[ i ] );
}
return ret;
};
}
if( document.attachEvent ) {
window.attachEvent( "onload", HideSpoilers );
window.attachEvent( "onload", PrepareSpoilerButtons );
} else {
window.addEventListener( "load", HideSpoilers, true );
window.addEventListener( "load", PrepareSpoilerButtons, true );
}
//-->
</script>
</head>
<body>
<div>
<h2>Div-Toggle-Test</h2>
<button class="BtnSpoiler">Zeigen</button>
<div class="spoiler">
Versteckter Text.
</div><br />
<button class="BtnSpoiler">Zeigen</button>
<div class="spoiler">
Versteckter Text 2.
</div><br />
</div>
</body>
</html>
