---
title: "Webseiten-Elemente mit Hilfe von jQuery auf- und zusliden lassen"
author: "Ellen Bauer"
date: 2010-11-05
lang: de
source: https://elmastudio.de/webseiten-elemente-mit-jquery-auf-und-zusliden/
---

# Webseiten-Elemente mit Hilfe von jQuery auf- und zusliden lassen

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](https://api.jquery.com/slideToggle/) 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](https://elmastudio.de/wp-content/uploads/2010/11/jquery-toggle-slider-01.jpg)

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

![jQuery Toggle Slider](https://elmastudio.de/wp-content/uploads/2010/11/jquery-toggle-slider-02.jpg)

*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«](https://bueltge.de/wordpress-und-jquery-einige-tipps/1172/) 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](https://webdesignerwall.com/tutorials/jquery-tutorials-for-designers) 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](https://wordpress.org/plugins/sliding-panel/) funktioniert mit Widgets, du kannst also beliebige Inhalte in dein Slider-Element einfügen.

![jQuery Toggle Slider](https://elmastudio.de/wp-content/uploads/2010/11/jquery-toggle-slider-03.jpg)

*Ü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](https://justintadlock.com/archives/2009/06/25/sliding-panel-wordpress-plugin) 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«](https://webdesignerwall.com/tutorials/jquery-tutorials-for-designers) auf Webdesigner Wall
- [»Simple Accordion with CSS and jQuery«](http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/) von Soh Tanaka
- [»Nice & Clean Sliding Panel Built With Jquery«](https://www.web-kreation.com/) Tutorial von Web-kreation
- [»10 Transition Effects: The Art of Showing/Hiding Content«](http://devsnippets.com/article/10-transition-effects-the-art-of-showinghiding-content.html) 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!