Vorlage Diskussion:Ausklappen2

Damit die Vorlagen Vorlage:Ausklappen2 und Vorlage:Ausklappen3 funktionen, müsste folgendes ergänzt werden. -- Grüße J* 23:34, 27. Jan 2008 (CET)

Monobook.css

.klapp {
	cursor: pointer;
}
span.klapp {
	text-decoration: none;
	color: #002bb8;
	background: none;
	}

span.klapp:hover {
	text-decoration: underline;

Monobook.js

// ================================================================================
// Ein- und Ausblenden per Javascript

// mit den folgenden Funktionen lässt sich ein div-Konstrukt in ein Einblende-Ausblende-Ding verwandeln
//
// Variante 1 (Klick irgendwo blendet ein oder aus):
//	<div class="klapp">
//		<div class="klapp_t">Titel im ausgeblendeten Zustand</div>
//		<div class="klapp_e">Titel im ausgeblendeten Zustand</div>
//		<div class="klapp_i">Einzublendender Inhalt</div>
//	</div>
//
// Variante 2 (ein- und ausblenden nur mit Links):
//	<div>
//		<div class="klapp_t">Titel im ausgeblendeten Zustand mit <span class="klapp">Einblendelink</span></div>
//		<div class="klapp_e">Titel im ausgeblendeten Zustand mit <span class="klapp">Ausblendelink</span></div>
//		<div class="klapp_i">Einzublendender Inhalt</div>
//	</div>

function ausklapp( element )
{
	var klapp_i = null;
	var klapp_e = null;
	var klapp_t = null;

	for (i in element.childNodes)
	{
		if( element.childNodes[i].nodeType == 1 )
		{
			if ( element.childNodes[i].className == "klapp_i" )
				klapp_i = element.childNodes[i];
			else if ( element.childNodes[i].className == "klapp_t" )
				klapp_t = element.childNodes[i];
			else if ( element.childNodes[i].className == "klapp_e" )
				klapp_e = element.childNodes[i];
		}

		if ( klapp_i && klapp_t && klapp_e )
			break;
	}

	if( klapp_i.style.display == "block")
	{
		klapp_i.style.display = "none";
		klapp_e.style.display = "none";
		klapp_t.style.display = "block";

	}
	else
	{
		klapp_i.style.display = "block";
		klapp_e.style.display = "block";
		klapp_t.style.display = "none";
	}

}

// Diese Funktion weist einem Objekt einen Event-Handler zu.
// Argumente:	objekt - das Objekt
//		onEvent - ein event, z.b. "click" (ohne das "on", kleingeschrieben, als String)
//		funktion - ein Pointer auf die aufzurufende Funktion
//		captionMode - falls es keinen speziellen Grund gibt, einfach auf false setzen
function addEvent(objekt, onEvent, funktion, captionMode )
{
	if (objekt.addEventListener)
	{
		objekt.addEventListener(onEvent, funktion, captionMode);
		return true;
	}
	else if (objekt.attachEvent)
	{
		var ret = objekt.attachEvent("on" + onEvent, funktion);
		return ret;
	}
	else
	{
		return false;
	}
}

// Event-Handler für alle class="klapp"-Objekte zuweisen
function makeAusklapp()
{
	// klapp-div-Rahmen
	var a = document.getElementsByTagName("div"); 
	for ( div in a )
	{
		if ( a[div].className == "klapp" )
		{
			//Leider nicht IE-Kompatibel:
			//var f = function () { ausklapp(this) };
			//addEvent( a[div], "click", f , false );
			//stattdessen:

			a[div].onclick = function () { ausklapp(this);}
		}
	}

	// klapp-spans-Rahmen als Link-Ersatz
	var a = document.getElementsByTagName("span"); 
	for ( span in a )
	{
		if ( a[span].className == "klapp" )
		{
			a[span].onclick = function () { ausklapp(this.parentNode.parentNode);}
		}
	}

}

// makeAusklapp() nach Laden des Fensters ausführen!!
addEvent( window, "load", makeAusklapp, false );