Es gibt etliche Beispiele, bei denen es sinnvoll ist Webseiten-Inhalte erst bei Klick auf einen Button aufsliden zu lassen. Z.B. kannst du auf diese Weise sehr schön einen Nutzer-Login für Mitglieder oder Kunden integrieren. Da sich nicht alle Webseiten-Besucher anmelden wollen, kannst du den Login-Bereich mit jQuery so elegant verstecken. Ich habe verschiedene Möglichkeiten getestet, um den Effekt auf der eigenen Webseite zu integrieren.

1. Den jQuery-Code selbst einfügen

Allgemeine Infos und Demos für jQuery slide.Toggle kannst du auf der jQuery-Webseite nachlesen. Auf dieser Code-Vorlage aufbauend habe ich eine einfache Demo-Version erstellt, die demonstriert wie man den Code für ein Element nutzen kann, dass bei Button-Klick oben in der Webseite aufslidet.

1.1. Demo-Version 1 (auch ohne JavaScript sichtbar)

Der Slider im geschlossenen Zustand. Nur der Open/Close Button ist sichtbar.

Der Slider im offenen Zustand. Das versteckte Webseiten-Element ist jetzt sichtbar.

Hier kannst du dir die Demo des Slider-Elements und den Code live anschauen.

• Live-Demo
  Query Toggle-Slider 01

Als ersten Schritt musst du die jQuery-Bibliothek aufrufen. Das kannst du praktisch über die Google Libraries API machen.

Füge dazu folgenden Code innerhalb des head-tags deiner Datei auf:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Als nächsten Schritt fügst du deinen HTML-Code für das verstecke Element (#content) und den Öffnen / Schließen Button (a.open-close) innerhalb deines body-tags ein. Den Inhalt kannst du dann natürlich ganz nach Belieben selbst füllen.

<div id="content"><p>Dein Inhalt kommt hier rein...</p></div><a class="open-close" href="#">Open / Close</a>

Für dein CSS kannst du jetzt folgende Styles verwenden und an dein Layout anpassen.

body {	margin:0 auto;	width:500px;	font-family:Helvetica, Arial, sans-serif;}a.open-close {	margin:0px;	padding:15px;	text-align:center;	background:#FF9933;	font-size:14px;	font-weight:700;	text-transform:uppercase;	display:block;	color:#fff;	text-decoration:none;}a.open-close:hover {	background:#FF0000;}#content {	width:460px;	margin:0px;	background:#FFFF99;	padding:20px;	color:#663300;	line-height:23px;}

Um dein Element jetzt mit dem Toggle-Effekt sliden zu lassen, fügst du noch folgenden Code in deinen head-tag ein:

<script type="text/javascript"> $(document).ready(function(){    	$("#content").hide();    $("a.open-close").click(function () {      $("#content").slideToggle("slow");    });});</script>

Dieser jQuery-Code versteckt deinen Div mit der ID content (hide), und slidet den Content dann bei Klick des Anchor-Tags a.open-close auf.

Wenn du den JavaScript-Code in WordPress nutzen möchtest, ist der Artikel »WordPress und jQuery – einige Tipps« auf dem Blog von Frank Bültge sehr hilfreich. Hier erfährst du genau, wie du den benötigten jQuery-Code am besten in dein Theme integrierst.

1.2. Demo-Version 2 (ohne JavaScript unsichtbar)

Als Alternative zu dem ersten Code-Beispiel habe ich eine zweite Demo nach der Slider-Vorlage auf dem Blog Webdesigner Wall erstellt. Dieses Beispiel ist nicht sichtbar, sobald JavaScript im Browser deaktiviert ist. Dafür ist der Öffnen / Schließen Button hier animiert, und du könntest z.B. ein Hintergrund-Image mit einem Pfeil nach oben und einem nach unten im Button integrieren. Auch den zweiten Demo-Slider kannst du dir hier live anschauen.

• Live-Demo
  jQuery Toggle-Slider 02

Die jQuery-Bibliothek fügst du genau wie im ersten Beispiel mit folgendem Code über die Google Libraries in deinen head-tag ein:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Folgenden HTML-Code benötigst du für den Inhalt deines versteckten Elements:

<div id="content"><p>Deinen Inhalt kannst du hier einfügen...</p></div> <p class="button"><a href="#" class="open-close">Open / Close</a></p> 

Für dein CSS-Stylesheet kannst du folgenden Code als Basis für dein eigenes Layout verwenden. Wichtig ist, dass hier der Content-Div mit display:none; unsichtbar gemacht wird.

body {	margin:0 auto;	width:500px;	font-family:Helvetica, Arial, sans-serif;}a:focus {	outline: none;}#content {	display: none;	color:#663300;	line-height:23px;}#content p {	padding:20px;	background: #FFFF99;	margin:0px;}.button {	margin:0px;}.open-close {	padding:15px;	text-align:center;	background:#FF9933;	font-size:14px;	font-weight:700;	text-transform:uppercase;	display:block;	color:#fff;	text-decoration:none;}.open-close:hover {	background:#FF0000;}.active {	background:#FF0000;}

Um die Animation zu starten fügst du für diese Variante noch folgenden JavaScript-Code in den head-tag deiner Seite ein:

<script type="text/javascript"> $(document).ready(function(){ 	$(".open-close").click(function(){		$("#content").slideToggle("slow");		$(this).toggleClass("active");	});});</script> 

Mit diesem Code hast du deinen versteckten Seiteninhalt animiert. Deinen Öffnen / Schließen Button kannst du dir für den Zustand des geöffneten Elements mit dem CSS-Style .active entsprechend gestalten.

2. Das WordPress-Plugin »Sliding Panel«

Für alle WordPress-Nutzer gibt es ein praktisches Plugin, mit dem der gleiche Effekt erzieht werden kann. Das Plugin Sliding Panel funktioniert mit Widgets, du kannst also beliebige Inhalte in dein Slider-Element einfügen.

Über WordPress-Widgets kannst du Inhalt in dein Slider-Element einfügen.

Um den Slider in deinem Theme zu nutzen, kannst du einfach den folgenden Template Tag in die gewünschte Theme-Datei einfügen:

<?php get_sliding_panel(); ?>

Der Plugin-Autor Justin Tadlock hat die Funktion des Panel Sliding-Plugins auch noch einmal in einem extra Blog-Artikel erklärt.

3. Tipps und Tutorials zum Weiterlesen

Jede Menge weitere Inspirationen für Ein- und Ausblenden-Effekte mit jQuery findest du auch in den folgenden Blog-Artikeln und Tutorials.

• »jQuery Tutorials for Designers« auf Webdesigner Wall
• »Simple Accordion with CSS and jQuery« von Soh Tanaka
• »Nice & Clean Sliding Panel Built With Jquery« Tutorial von Web-kreation
• »10 Transition Effects: The Art of Showing/Hiding Content« bei DevSnippets

Wie gefällt dir dieser jQuery-Effekt? Kennst du weitere praktische Einsatzmöglichkeiten oder Webseiten-Beispiele für slidenede Elemente? Über dein Feedback und deine Tipps freue ich mich sehr!