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 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:

<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.

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.

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 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.

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!

Rate this post

21 Kommentare

  1. Ich nutze Ihn auf meiner Webseite in Zusammenhang mit einem Cookie, welches den Status 365 Tage speichert, um die Webseitenansicht mit Magazinlayout in ein Bloglayout zu ändern.

    Also, bei Klick werden bestimmte DIVs per CSS ausgeblendet und das, mit diesem Effekt. Zu testen direkt bei mir im Blog, Link ganz oben neben Datum..

    • Hallo René,

      vielen Dank für deinen Kommentar, dass ist echt eine klasse Idee, wie du den Effekt auf deinem Blog umgesetzt hast :-)

      Es gibt ja wirklich jede Menge kreative Optionen, einen Open/Close Effekt einzusetzen :-)

      Viele Grüße,
      Ellen

  2. Funktioniert super, vielen Dank!

    Eine Frage habe ich dennoch: Wie kann man das automatische scrollen unterdrücken? Wenn ich den Button für das Schließen bzw. Öffnen betätige scrollt er automatisch zum Anfang der Website. In Eurem Blog, unter dem Menupunkt „Social Sites“ ist dies bei mir nicht der Fall. Danke!

    • Hallo Sebastian,

      vielen Dank für deinen Kommentar und dein Feedback zum jQuery-Effekt :-)

      Den Effekt kannst du eigentlich an jedem beliebigen Element deiner Webseite einsetzen, also auch bei einem DIV-Container weiter unten im Design. Dann öffnet und schließt sich nur jeweils dieses Element.

      Das Sidebar-Element „Social Sites“ hier auf dem Blog haben wir nach Vorlage des Tutorials von Soh Tanaka umgesetzt. Schau doch dort einmal rein :-)

      Viel Erfolg und viele Grüße,
      Ellen

      • Hallo Ellen,

        dank Dir erneut für den Hinweis und dem Verweis auf das Tutorial!

        Mein Problem hat sich erledigt, es war anscheinend doch schon ein bisschen spät für mich.

        Freu mich auf den nächsten Artikel von euch und wünsche einen angenehmen Start in die neue Woche.

  3. Zwei Anmerkungen:

    1.) das Display:none; über jQuery setzen, bsp. =>
    $(‚.jsHidden‘).css({ display:none; });

    2.) bei slideToggle vergibt man dem display:none; Element eigentlich kein Padding, denn das ruft das unschöne springen hervor. Besser dem #content kein Padding und noch ein Div in #content mit padding legen.

    Benjamin

    • ups, das zweite Demo nicht gesehen :-) Dann entfällt natürlich Punkt 1 und .hide(); ist eh sinnvoller, wen den JS Elementen nur ein Display:none; mit auf den Weg gegeben wird.

      • Hallo Benjamin,

        vielen Dank für deine Mithilfe und die Tipps zum Code :-) Ich werde die Demo gleich noch einmal anpassen, um das Padding zu vermeiden.

        Vielen Dank und viele Grüße,
        Ellen

  4. Sebastian Bloß 9. November 2010

    Hallo Ellen,

    verzeih mir bitte, ich muss doch noch einmal nachfragen.
    Ich arbeite mit dem Slider aus dem ersten Beispiel, aber gleiches tritt auch bei dem 2. Slider auf. Wenn ich den Slider betätige, springt er wie bereits erwähnt zum Anfang der Webseite, schuld ist natürlich die Raute im Linkziel. Neben dem unschönen scrollen zum Seitenanfang steht natürlich nun in der Adressleiste des Browsers http://domain.de/#, ein Effekt den ich auch gerne vermeiden würde. Freue mich auf Hilfe, wenn es Deine Zeit zulässt.

    Gibt es hier eine Möglichkeit beides zu unterdrücken.

    • Sebastian Bloß 9. November 2010

      Hallo,

      entschuldigt, dass ich mich noch einmal zu Wort melde. Habe gerade nach eurem Artikel „Back-to-Top Buttons“ ( http://www.elmastudio.de/wordpress/back-to-top-buttons-mit-smooth-scroll-und-fading-in-wordpress/ ) das erste Beispiel nachgebaut. Meine Javascript-Datei um den dort angegeben Code ergänzt und nun hat sich auch mein zuvor erwähntes Problem gelöst und alles Funktioniert wie gewollt, ohne lästiges automatisches nach oben Scrollen und die erwähnte Raute ist nun auch nicht mehr in der URL zu finden.

      Vielen Dank an Euch, freue mich riesig diesen Blog vor kurzem entdeckt zu haben. Macht weiter so!

      • Hallo Sebastian,

        klasse, dass es jetzt mit dem Code doch noch geklappt hat :-) Und vielen herzlichen Dank auch für dein tolles Feedback zu den Artikeln. Es freut uns sehr, dass dir unser Blog so gut gefällt :-)

        Viele Grüße,
        Ellen

  5. Super, nach diesem Effekt habe ich schon lange gesucht.
    Was macht man, wenn man mehrere Slider auf einer Seite einfügen will?
    Das Sliden funktioniert leider nur beim ersten eingefügten Element.

  6. Hi Ellen,

    wie immer gut erklärt! Danke! Folgende Frage: Wir wollen eine WordPress-Seite mit mehreren Ankern bauen, zu denen man aus einer Artikel-Navi „springen“ kann. Dabei soll nach Click der Artikel mit nem coolen Effekt nach oben sliden, bis der Anker sichtbar wird. Aus unserer HP ist das (ohne WP, also rein manuell) umgesetzt. Wie würdest Du das in WP machen? Wobei ich nur auf/ab sliden will und nicht, wie auf unserer HP, auch noch rechts/links?

    Wär super, wenn Du da nen Tipp hast!

    Danke und mach weiter! Ich mag Deinen Blog!

  7. Hallo Ellen,
    ich wollte mich mal bedanken, du hast mir schon so oft aus der Klemme geholfen :P
    Auch die Lösung werde ich mir wohl gleich mal mopsen :D
    Mach weiter so
    Henrik

  8. Hallo Ellen,
    hast du eine Idee, wie die Toggle-funktion auf folgender seite umgesetzt wurde?
    Nach dem Klicken auf den „Add-to-Cart-Button“ öffnet sich eine Contentbox mit Inhalten.
    Genau nach dieser Lösung suche ich bereits Händeringend.
    Ich konnte nur Folgenden Schnippsel auf der Seite finden:

    $(function() { $(‚#toggle4‘).click(function() { $(‚.toggle4‘).slideToggle(‚900‘); return false; }); });

    Lieben Gruß
    Frank

  9. Hallo,
    ich habe die erste Version auch in meiner Seite integriert, allerdings gibt es beim Android Browser Probleme.
    Nachdem ich die Div angeklickt habe, die für das Schließen zuständig ist, fährt der Content auch ein, sobald aber alles eingefahren ist, fährt es sofort wieder aus.

    Weiß jemand Rat? Oder funktioniert das einfach nicht am Smartphone?

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *