✔ Mehre Divs gleichzeitig aus/einblenden (via Class/Name) - Status in Cookie schreiben

G

Genesyst

Mitglied
Hallo zusammen,

ich habe heute wieder mal ein paar Seiten mehr im Netz kennen gelernt auf meiner Suche nach einer Problemlösung. Leider bin ich trotz dieser abenteuerlichen Reise nicht zu einer Lösung gekommen, weswegen ich nun hier um eine solche ersuche.

Folgendes Problem: Ich will mittels einer Schaltfläche mehrere Divs auf einmal aus bzw. einblenden. Genauer geht es dabei darum das sich in einem Forum oberhalb der Signaturen eine Schaltfläche/ ein Link finden soll mit Hilfe dessen User sämtliche Signaturen im Forum ein und ausblenden können sollen. Sprich klickt der User werden die Signaturen ausgeblendet (div wird ausgeblendet), oder eben umgekehrt.

Ich habe bereits etliche Scripte gefunden, allerdings basieren diese entweder auf IDs, und da diese eindeutig sind fallen sie weg, da wie eventuell bekannt die Posts in einem Thread in einer Schleife abgerufen werden, weswegen diese ID mehrfach vorhanden wäre. Dadurch wird dann zwar die erste Signatur ausgeblendet, aber eben alle anderen nicht.

Also muss es entweder über eine Klasse oder "Name" laufen. Auch hierzu habe ich etliche Scripte gefunden, allerdings keines bei dem dann auch ein Cookie über den Status hinterlegt wird.

Kurz und knapp:
  • Mehre Divs gleichzeitig ausblenden
  • Entweder via Class oder Name
  • Status in einen Cookie schreiben
Ich selbst habe leider keine Ahnung von Javascript, weswegen ich mich da auch wirklich schwer tue. Im Forum steht jQuery zur Verfügung, wenn das irgend etwas erleichtern sollte.

Ich würde mich wirklich freuen wenn mir da jemand helfen könnte. Bedanken will ich mich dafür bereits im Vorfeld.

Beste Grüße!
 
Genesyst hat gesagt.:
Im Forum steht jQuery zur Verfügung, wenn das irgend etwas erleichtern sollte.
Zum Vergrößern anklicken....

Sag das doch gleich :-D, das macht es wesentlich leichter.
Wenn du mit Cookies arbeiten willst, empfehle ich noch ein jQuery Cookie Plugin, z.B. http://plugins.jquery.com/project/Cookie

Hier mal ein Beispiel

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Signaturen ausblenden mit Cookie</title>
	
	<style type="text/css">
		.sig {
			margin:10px 0px;
			background:blue;
		}
	</style>
</head>

<body>
	<div>
		<input type="button" id="cmdFadeSigs" value="Ein-/Ausblenden" />
		<div class="sig">Bla bla bla</div>
		<div class="sig">Bla bla bla</div>
		<div class="sig">Bla bla bla</div>
		<div class="sig">Bla bla bla</div>
		<div class="sig">Bla bla bla</div>
		<div class="sig">Bla bla bla</div>
		<div class="sig">Bla bla bla</div>
	</div>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.cookie.js"></script>
	
	<script type="text/javascript">
	/* <![CDATA[ */
	$(document).ready(function(){
		var sigs = $('.sig');
		
		//Anfangszustand je nach Cookie setzen
		if($.cookie('hide_sigs')) {
			sigs.hide();
		}
		
		$('#cmdFadeSigs').click(function() {
			if($.cookie('hide_sigs')) {
				sigs.slideDown();
				//Cookie löschen (Signaturen sind standardmäßig sichtbar)
				$.cookie('hide_sigs', null);
			} else {
				sigs.slideUp();
				$.cookie('hide_sigs', 1);
			}
		});
	});
	/* ]]> */
	</script>
</body>

</html>
 
Hallo,

vielen Dank für die Hilfe. Das schaut genau nach dem aus was ich suche. Leider gibt es aber ein Problem, wobei ich nicht weiß ob es an mit oder am Script liegt.

Jedenfalls habe ich das Ganze mal in dieser Form hoch geladen und die X habe ich auch entsprechend hoch geladen.

Jedenfalls passiert beim Betätigen der Schaltfläche nichts. Eventuell habe ich auch etwas falsch gemacht.

Hier mal der Test: Link

Vielen Dank erneut! :)
 
Vielen Dank. Typischer Anfängerfehler. ;)

Im Forum funktioniert es nun auch. Ein kleines Problem entsteht noch dadurch das ich die Schaltfläche zum Ausblenden über jeder Signatur in einem Thread anzeigen lasse. Dadurch das diese aber eine ID hat funktioniert es nur wieder im ersten Posting.

Gibt es da eventuell die Möglichkeit einen anderen Weg als das id="cmdFadeSigs" zu nehmen?

Ich will nicht undankbar klingen und ich bin schon glücklich das es so geht. Sollte das mit der ID von Nöten sein überlege ich mir ob ich oben eine globale Schaltfläche einrichte.

Hier mal ein Bild damit klarer wird wie das derzeit aussieht:

sighide.jpg


Vielen, vielen Dank für die Hilfe und die daraus resultierenden Mühen!

Edit: Manchmal hilft es dann doch zunächst selbst zu denken. Habe den Part einfach in ne Klasse geändert und damit gehts auch. :)

Vielen, vielen Dank erneut!
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück