Sidebar ein- und ausblenden (jQuery toggle)

Wer seine Sidebar auf Knopfdruck ein- und ausblenden möchte sollte sich diesen Beitrag anschauen:

• jQuery und die horizontale Slide-Funktion – Bueltge.de

In dem Blog ist die Funktion auch eingebaut und so kann man den Effekt testen.
Und wie baut man das ein?

Dazu gibt es eine Testseite auf der der Script-Einbau erklärt wird. Einfach und schnell nachvollziehbar.
(wie immer bei Frank Bültge, vielen Dank daür).

In dem Beispiel wird die Sidebar standardmäßig angezeigt (show) und lässt sich durch klick entfernen (hide).

Ich wollte die Funktion umgekehrt haben.
Also das die Sidebar erst beim anklicken erscheint. In den Kommentaren zum obigen Blogbeitrag finden sich dazu auch einige Hinweise.

So richtig geklappt hat es schließlich mit folgendem Code für die Funktion:

<!--jquery zum einblenden der Sidebar-->
<script type="text/javascript">
jQuery(document).ready(function() {
$('.sidebar').hide();
$("a#ToogleSidebar").toggle(function() {
$('#sidebar').animate({
width: 'show',
opacity: 'show'
}, 'slow');
}, function() {
$('#sidebar').animate({
width: 'hide',
opacity: 'hide'
}, 'slow');
return false;
});
});
</script>

eingeügt direkt vor

<?php wp_head(); ?>
</head>

Benötigt man die Funktion nur für eine bestimmte Seite, so lässt sich eine if-Abfrage einbauen:
dazu vor dem Script:

<?php if (is_page('name-der-seite')) { ?>
und danach:
<?php } ?>

Den Link zum Aufklappen habe ich in den Header gesetzt:

<a href="#" id="ToogleSidebar" title="ein-/ausblenden">Klick mich</a>

Styling Angaben:
sitzt die Sidebar auf der rechten Seite, so kann man den Link auch rechtsseitig platzieren.

#ToogleSidebar { float: right; margin: 1em; }

Das Script lässt sich auch für den Footer verwenden:

Da ich nicht den kompletten Footer ein- und ausblenden wollte, (Hintergrund Bild im Footer) habe ich innerhalb des Footers einen Subfooter eingerichtet, der dann bei Bedarf auftaucht.

Zu sehen in meinen Adventskalender

Dazu einfach alle Begriffe im obigen Code von Footer auf Subfooter umstellen.
z. B. $('.footer').hide(); wird dann zu $('.subfooter').hide();
Es muss natürlich im Template dann auch eine id namens subfooter geben.