JS-Plugin Dropdowntabs
HTML
JavaScript
CSS
Demo
<!DOCTYPE html> <html> <head> 	<title>Dropdowntabs</title> 	<link rel="stylesheet" type="text/css" href="ddtabs.css" media="screen" /> 	<script src="ddtabs.js"></script> 	<script type="text/javascript" language="JavaScript"> 		window.onload = function() { 			var tabgroup = new Dropdowntabs({openFlag:true,openTab:0,closeFlag:true}); 		} 	</script> </head> <body> 	<div id="ddtabs"> 		<div class="tabhead">Tabhead 1</div> 		<div class="tabcontent"> 			<p>Text Tab 1</p> 		</div> 		<div class="tabhead">Tabhead 2</div> 		<div class="tabcontent"> 			<p>Text Tab 2</p> 		</div> 		<div class="tabhead">Tabhead 3</div> 		<div class="tabcontent"> 			<p>Text Tab 3</p> 		</div> 	</div> </body> </html>
/* RaWi-JS-Plugin:	Dropdown-Tabs (animierte Version) 	*	JS-File:					ddtabs.js 	*	CSS-File:				ddtabs.min.css */ (function() { 	// Constructor 	this.Dropdowntabs = function() { 		// Globale Plugin-Element-Referenz 		this.dropdowntabs = null; 		// Vars 		this.tabcontentArray = new Array(); 		this.tabcontentheightArray = new Array(); 		// Option-Defaults 		var defaults = { 			idTabs:			'ddtabs',					// ID-Dropdown-Tabs 			cHeadClosed:	'tabhead',					// Klasse Tab-Head geschlossen 			cHeadOpen:		'tabhead current',	// Klasse Tab-Head offen 			cTabcontent:	'tabcontent',			// Klasse Tab-Content-Div 			openFlag:		false,							// Flag zum öffnen eines Tabs beim Aufruf der Seite 			openTab:			0,									// Nummer des zu öffnenden Tabs (0 bis X) 			closeFlag:		true								// Offene Tabs schließen (true) oder offen lassen (false) 		} 		// Übernahme der Option-Defaults bzw. der Argumente der Seite 		if (arguments[0] && typeof arguments[0] === "object") { 			this.options = extendDefaults(defaults, arguments[0]); 		} 		// Dropdowntabs-Div 		this.dropdowntabs = document.getElementById(this.options.idTabs); 		// Array der Tab-Heads 		this.tabHeadArray = this.dropdowntabs.querySelectorAll('[class='+this.options.cHeadClosed+']'); 		// EventListener zu den Tab-Heads hinzufügen 		for (var i = 0; i < this.tabHeadArray.length; i++) { 			this.tabHeadArray[i].addEventListener('click', this.handleClick.bind(this,i)); 		} 		// Array der Tab-Content-Divs 		this.tabcontentArray = this.dropdowntabs.querySelectorAll('[class='+this.options.cTabcontent+']'); 		// Höhe der Tab-Content-Divs ermitteln und dann auf Null stellen 		for (var i = 0; i < this.tabcontentArray.length; i++) { 			var rect = this.tabcontentArray[i].getBoundingClientRect(); 			this.tabcontentheightArray[i] = rect.height; 			this.tabcontentArray[i].style.height = '0px'; 		} 		// openFlag === true -> entsprechenden Tab öffnen 		if (this.options.openFlag === true) this.openTab(this.options.openTab); 	} 	// --------------- 	// Plugin-Methoden 	// --------------- 	// Tab öffnen 	Dropdowntabs.prototype.openTab = function(tabnumber) { 		this.tabHeadArray[tabnumber].className = this.options.cHeadOpen; 		this.tabcontentArray[tabnumber].style.height = this.tabcontentheightArray[tabnumber] + 'px'; 	} 	// Tab schließen 	Dropdowntabs.prototype.closeTab = function(tabnumber) { 		this.tabHeadArray[tabnumber].className = this.options.cHeadClosed; 		this.tabcontentArray[tabnumber].style.height = '0px'; 	} 	// Funktion handleClick 	Dropdowntabs.prototype.handleClick = function(tabnumber,event) { 		// Bereits offene Tabs schließen wenn closeFlag === true 		if (this.options.closeFlag === true) { 			for (var i = 0; i < this.tabHeadArray.length; i++) { 				// wenn ein anderer Tab offen, dann schließen 				if (this.tabHeadArray[i].className == this.options.cHeadOpen && tabnumber != i) { 					this.closeTab(i); 				} 			} 		} 		// Angeklickten Tab öffnen/schließen 		if (this.tabcontentArray[tabnumber].style.height == '0px') { 			// Tab ist geschlossen -> öffnen 			this.openTab(tabnumber); 		} else { 			// Tab ist offen -> schließen 			this.closeTab(tabnumber); 		} 	} 	// ------------------------------ 	// Option defaults implementieren 	// ------------------------------ 	function extendDefaults(source, properties) { 		var property; 		for (property in properties) { 			if (properties.hasOwnProperty(property)) { 				source[property] = properties[property]; 			} 		} 		return source; 	} }());
/* Styles Dropdowntabs */ .tabhead, .tabhead.current { 	background:#e0e0e0; 	font-weight:bold; 	color:#000; 	display:block; 	box-sizing:border-box; 	cursor:pointer; 	-webkit-transition:all .3s ease; 	-moz-transition:all .3s ease; 	-ms-transition:all .3s ease; 	-o-transition:all .3s ease; 	transition:all .3s ease; } .tabhead:after { 	content:''; 	position:relative; 	float:right; 	transform:rotate(-135deg); } .tabhead:hover { color:#fd8f00; } .tabhead.current { color:#2472b9; } .tabhead.current:after { 	content:''; 	position:relative; 	float:right; 	transform:rotate(45deg) } .tabhead.current:hover { color:#fd8f00; } .tabcontent { 	display:block; 	overflow:hidden; 	-webkit-transition:height .3s ease; 	-moz-transition:height .3s ease; 	-ms-transition:height .3s ease; 	-o-transition:height .3s ease; 	transition:height .3s ease; } /* Values */ #ddtabs { 	width:75%; 	margin:45px auto 0px auto; } .tabhead, .tabhead.current { 	font-size:24px; 	margin:0; 	padding:14px 0px 16px 35px; 	-webkit-border-radius:10px; 	-moz-border-radius:10px; 	-o-border-radius:10px; 	border-radius:10px; } .tabhead:after { 	width:14px; 	height:14px; 	top:5px; 	right:35px; 	border-top:3px solid #777; 	border-left:3px solid #777; } .tabhead.current:after { 	width:14px; 	height:14px; 	top:12px; 	right:35px; 	border-top:3px solid #777; 	border-left:3px solid #777; } .tabcontent { 	width:95%; 	font-size:16px; 	margin:6px auto 20px auto; }
Dieses Plugin wird auf der Seite Sitemap verwendet.
Dieses Plugin kommt auf der Seite Sitemap zum Einsatz.
Sorry, aber die Darstellung der Codes dieses Beispiels ist auf kleinen Displays zu unübersichtlich.Sie können sich jedoch die Codes downloaden und das Plugin auf ihrem PC/Laptop/Tablet ausprobieren.