Imagetrigger Klappbox mit jQuery + CSS

Gepostet von Söhnke am 08.01.2011 in - Allgemein - How-To - Internet - Technik | Keine Kommentare

Ich habe für eine Seite die ich umsetzen wollte eine aufklappbare Box benötigt, die sich mit einem Bild triggern lässt.

Lange habe ich gesucht und bin doch nicht fündig geworden. Auf http://www.sohtanaka.com/ habe ich dann dann den Simple Toogle with CSS & jQuery gefunden, welcher schon fast meinen Ansprüchen genügt, leider triggert in dem Script eine Überschrift und kein Bild.

Also musste ich das Script geringfügig umschreiben, ich weiss das hier auch nichts anderes getriggert wird, sondern einfach nur ein Bild mit in den Trigger geschummelt wird, aber das Problem lässt sich damit auf jedenfall lösen.

Neben dem üblichen jQuery, welches wir wie folgt im head Bereich einbinden:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Benötigen wir noch folgendes im head Bereich um dem trigger zu sagen was er tun soll:

<script type="text/javascript">
$(document).ready(function(){

	$(".toggle_container").hide();

	$("h2.trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
	});

});
</script>

Und hier haben wir zum Schluss noch das CSS welches wir benötigen:

h2.trigger {
	margin:0px;
	height: 94px;
	line-height: 46px;
	width: 400px;
	font-size: 2em;
	font-weight: normal;
	float: left;
}
h2.trigger a {
	color: #fff;
	text-decoration: none;
	display: block;
}
h2.trigger a:hover { color: #ccc; }
h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/
.toggle_container {
	margin: 0 0 5px;
	padding: 0;
	border-top: 1px solid #d6d6d6;
	background: #f0f0f0 url(toggle_block_stretch.gif) repeat-y left top;
	overflow: hidden;
	font-size: 1.2em;
	width: 400px;
	clear: both;
}
.toggle_container .block {
	padding: 10px; /*--Padding of Container--*/
	background: url(toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

Das war es schon, ich habe euch mal eine Demo gebastelt:

Lasst eurer Kreativität freien lauf, ihr könnt in dem getriggerten Bereich natürlich auch HTML benutzen.