Drupal Sidebar per Javascript (jQuery) ausblenden

So, 08.11.2009 - 14:10 -- Daniel Espendiller

Hat man längeren Text auf einer Seite und eine Sidebar für die Navigation und Blöcke, so wäre es doch hilfreich die Sidebar bei Bedarf auszublenden, um mehr Fläche für den Text zu haben. Da Drupal bereits die jQuery Library integriert hat ist, es ohne weiteres möglich über einen Button und ein paar Javascript Zeilen die entsprechenden div Elemente dynamisch per klick zu verändert, ohne das dafür die Seite neugeladen werden muss.
Ich habe dazu unten aufgeführtes Script in mein Theme eingebunden. Da ich ein Zen Subtheme benutze ist es relativ einfach über ein paar css Werte die Sidebar auszublenden.

  • Im themename.info muss das Skript eingetragen werden: Dazu eine neue .js Datei im Theme Ordner erstellen und in der .info Datei bekannt machen. scripts[] = meinedatei.js
  • In der page.php muss ein Button definiert werden. Ich erstelle diesen im Container sidebar-right vor sidebar-right-inner: <a href="#" id="butShowHide">Hide Sidebar</a>. Achtung: nicht im den Sidebarcontent sonst wird der Button gleich mit ausgeblendet!

Was passiert?

Wird auf den definierten Button geklickt so wird sidebar-right-inner komplett ausgeblendet. Danach werden die margin Werte so gesetzt, als ob keine Sidebar definiert ist (.no-sidebars #content). Zum Einblenden werden die Werte dann wieder auf den ursprünglichen Wert gesetzt.

Javascript Datei

$(document).ready(function(){
   var clicked=true;
 
$("#butShowHide").click(function(){
$(this).text($(this).text() == 'Hide Sidebar' ? 'Show Sidebar' : 'Hide Sidebar');
if(clicked){
                $('#sidebar-right-inner').slideToggle(200);
				$("#content").css("margin-right","-960px");
				$("#content").css("width","960px");
				clicked=false;
}else{
 
                $('#sidebar-right-inner').slideToggle(200);
				$("#content").css("margin-right","-610px");
				$("#content").css("width","610px");
clicked=true;
}
});