✔ jQuery - Sidebar und Cookies kombinieren

L

LonesWolf

Grünschnabel
Hallo liebe Tutorials.de Mitglieder!

Ich habe leider ein Problem, bei welchem ich einfach verzweifel. Ich habe mir eine Sidebar für eine Webseite gebaut, welche beim ersten Besuch geschlossen bleiben soll und sich erst beim klicken der Schaltfläche öffnet.

Da in der Sidebar ein Formular ist und bei jedem Absenden immer wieder die Sidebar schließt, wollte ich nun eine Art Cookie einsetzen, welche die Einstellung des Gasts speichert. Somit wird dem Gast immer der Status "Offen" oder "Geschlossen" angezeigt, welchen er selber gewählt hat.

Dies ist der HTML Code:

HTML: 
<div id="shoutbox"><a href="#" id="togglesidebar"></a>
 <div id="sidebar"></div>
</div>

Und dies ist mein JavaScript:

PHP: 
$(document).ready(function() {
	var sidebar_status = $.cookie("sidebar_status");

	if (sidebar_status == null){
 	$("a#togglesidebar").addClass('closed');
	$("#sidebar").hide();
  	};
	
	if (sidebar_status == "closed"){
 	$("a#togglesidebar").removeClass('open');
	$("a#togglesidebar").addClass('closed');
	$("#sidebar").css("display","none");
	};
	
  	if (sidebar_status == "open"){
	$("a#togglesidebar").addClass('open');
  	};


	$("a#togglesidebar").click(function() {
	if ($("a#togglesidebar").attr("class")=='open'){
		$(this).removeClass('open');
		$(this).addClass('closed');
		$.cookie("sidebar_status", "closed", { path: '/', expires: 100 });
		$("#sidebar").animate({
			width: 'hide',
			opacity: 'hide'
		}, 'slow');
	} else {
		$(this).removeClass('closed');
		$(this).addClass('open');
		$.cookie("sidebar_status", "open", { path: '/', expires: 100 });
		$("#sidebar").animate({
			width: 'show',
			opacity: 'show'
		}, 'slow');
	}
});

Ich kann hier einfach keinen Fehler finden und trotzdem funktioniert es einfach nicht :( Kann mir bitte jemand helfen?

jQuery und zusätzliche Plugins sind alle aktuell und eingebunden.

Viele Grüße
LonesWolf
 
Vielen Dank javaDeveloper2011! Da habe ich doch tatsächlich vor lauter Bäumen den Wald nicht mehr gesehen :)

Jetzt kann ich durch einen Klick die Sidebar öffnen und sie bleibt auch offen. Wenn ich jedoch erneut auf die Schaltfläche klicke, passiert leider garnix mehr :(

//EDIT:

Ich wollte nun nicht extra einen neuen Post dafür machen ;)

Ich vermute den Fehler im folgenden Bereich, da ich nun etwas damit rumgespielt habe und sich das Verhalten auch geändert hat, nur leider nicht zu dem gewünschten Verhalten. :(

PHP: 
$("a#togglesidebar").click(function() {

if ($('a#togglesidebar').attr('class')=='open'){
        $(this).removeClass('open');
        $(this).addClass('closed');
        $.cookie("sidebar_status", 'closed', { path: '/', expires: 100 });
        $('#sidebar').animate({ width: 'hide', opacity: 'hide' }, 'slow');
} else {
        $(this).removeClass('closed');
        $(this).addClass('open');
        $.cookie("sidebar_status", 'open', { path: '/', expires: 100 });
        $('#sidebar').animate({ width: 'show', opacity: 'show' }, 'slow');
}
 
Zuletzt bearbeitet:
Ich habe den Fehler nun gefunden und muss zugeben, dass ich viel früher die jQuery Seite durchstöbern hätte sollen :(

Aus folgendem:

PHP: 
$("a#togglesidebar").click(function() {

if ($('a#togglesidebar').attr('class')=='open'){
        $(this).removeClass('open');
        $(this).addClass('closed');
        $.cookie("sidebar_status", 'closed', { path: '/', expires: 100 });
        $('#sidebar').animate({ width: 'hide', opacity: 'hide' }, 'slow');
} else {
        $(this).removeClass('closed');
        $(this).addClass('open');
        $.cookie("sidebar_status", 'open', { path: '/', expires: 100 });
        $('#sidebar').animate({ width: 'show', opacity: 'show' }, 'slow');
}

macht man:

PHP: 
$("a#ToggleSidebar").click(function() {

if ($("a#ToggleSidebar").hasClass("open")) {
         $(this).removeClass('open').addClass('closed');
	 $.cookie("sidebar_status", "closed", { path: "/", expires: 100 });
	 $("#sidebar").animate({ width: 'hide', opacity: 'hide' }, 'slow');
} else { 
	 $(this).removeClass('closed').addClass('open');
	 $.cookie("sidebar_status", "open", { path: "/", expires: 100 });
	 $("#sidebar").animate({ width: 'show', opacity: 'show' }, 'slow');
}

Grüße und Danke nochmal.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück