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)

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

jQuery Toggle Slider
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.

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:

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

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.

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

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

[php]
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;
}
[/php]

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

[php]
<script type="text/javascript">
$(document).ready(function(){
$("#content").hide();

$("a.open-close").click(function () {
$("#content").slideToggle("slow");
});

});
</script>

[/php]

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.

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

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

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

[php]
<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>
[/php]

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.

[php]
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;
}

[/php]

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

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

$(".open-close").click(function(){
$("#content").slideToggle("slow");
$(this).toggleClass("active");
});

});
</script>
[/php]

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.

jQuery Toggle Slider
Ü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]
<?php get_sliding_panel(); ?>
[/php]

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.

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!