Mehrere Divs ein/ausschalten

Sclot · 29.11.2006, 11:40

Ich hab folgenden code:

HTML-Code:

<html>
<head>
<script>
function toggle_button(id)
{
	if(document.getElementById(id).style.display == 'block')
	{
		document.getElementById(id).style.display='none';
	}
	else
	{
		document.getElementById(id).style.display='block';
	}
}
</script>
</head>

<div>
	<a href="#" onClick="javascript:toggle_button('1');">
		Ein/ausblenden
	</a>
</div>
<div style="display:block;" id="1">
	<div>Hier<br>Steht<br>eine<br>Adresse<br>drin 1<br></div>
</div>
<div style="display:block;" id="1">
	<div>Hier<br>Steht<br>eine<br>Adresse<br>drin 2<br></div>
</div>
<div style="display:block;" id="1">
	<div>Hier<br>Steht<br>eine<br>Adresse<br>drin 3<br></div>
</div>
</html>

Logischer wwise blendet dieser Code nur den ersten DIV ein und aus, weil das ganze ID bezigen basiert.
Ich hab aber keine idee wie ich ALLE 3 DIVS ein/ausblenden kann.

kann da mal jemand freundlicherweise einen denkanstoß geben?

danke

WarrenFaith · 29.11.2006, 11:51

IDs dürfen nur Unique sein, also 3 mal "1" ist definitiv nicht gut und die andere Frage:
warum nicht so:

HTML-Code:

<div style="display:block;" id="1">
    <div style="display:block;">
        <div>Hier<br>Steht<br>eine<br>Adresse<br>drin 1<br></div>
    </div>
    <div style="display:block;">
        <div>Hier<br>Steht<br>eine<br>Adresse<br>drin 2<br></div>
    </div>
    <div style="display:block;">
        <div>Hier<br>Steht<br>eine<br>Adresse<br>drin 3<br></div>
    </div>
</div>

Sclot · 29.11.2006, 12:09

Weil die DIVs alle nicht zusammenhängend sind sondern nur als Adress-DIVs in einer tabellarischen Auflistung dienen.

Da ich in einer Tabelle keine TD´s ein und ausblenden kann, wollte ich es mit DIVs machen.

Xean · 29.11.2006, 12:14

wie wäre es mit document.getElementsByName??

gib den divs einen namen, und nimm den script hier:

Code:

<script>
function toggle_button(name)
{
	if(document.getElementsByName(name).style.display == 'block')
	{
		document.getElementsByName(name).style.display='none';
	}
	else
	{
		document.getElementsByName(name).style.display='block';
	}
}
</script>

#Ungetestet

Sclot · 29.11.2006, 12:15

ah... das hatte ich schon gestestet, da meinte er das es die Eigenschaft nicht gibt.

Aber ich hatte GetElementByName - da fehlte ein s drin...
ich versuchs nochmal, danke

mhm...
geht nicht

Fehler: document.getElementsByName(name).style has no properties
Quelldatei: file:///C:/Dokumente%20und%20Einstellungen/Sven/Desktop/test.html#
Zeile: 6

Xean · 29.11.2006, 12:41

Also gut.
dann hätte ich hier ne zweite lösung, die vielleicht nicht sooo toll ist:

Code:

<html>
  <head>
<script>
function toggle_button(name)
{
  var els = document.anchors;
  for(var i = 0; i < els.length; i++){
    var el_name = els[i].name;
    if(el_name == name){
      if(els[i].style.display == 'block')
	    {
		    els[i].style.display='none';
	   }
	   else
	   {
		    els[i].style.display='block';
	   }
    }
  }
}
</script>
  </head>
  <div>
    <a href="#" onClick="javascript:toggle_button('1');">Ein/ausblenden </a>
  </div>
  <a style="display:block;" name="1">
    <div>
      Hier
      <br>Steht
      <br>eine
      <br>Adresse
      <br>drin 1
      <br>
    </div>
  </a>
  asdfasdf
  <a style="display:block;" name="1">
    <div>
      Hier
      <br>Steht
      <br>eine
      <br>Adresse
      <br>drin 2
      <br>
    </div>
  </a>
  asdfasdf
  <a style="display:block;" name="1">
    <div>
      Hier
      <br>Steht
      <br>eine
      <br>Adresse
      <br>drin 3
      <br>
    </div>
  </a>
</html>

statt divs hab ich links benutzt, die man ganz einfach mit document.anchors ansprechen kann. und wenn ich dann überbrüfe, ob der name stimmt, dann wird der display-zustand geändert.
Eigenldich würde es jetzt auch mit ids funktionieren, aber das ist sehr hässlich dann

wenn du jetzt für die links im css (wenn du sowas benutzt) eigenschaften gesetzt hast, dann musst du nur statt a{} a:link{} schreiben, und alles sieht aus wie vorher, außer, du hast die farbe des textes geändert...

(als beweiß, dass es geht, hab ich noch paar buchstaben zwischen die link-elemente geschrieben)

Sclot · 29.11.2006, 12:46

ich teste...

mhm.. jow.. funktioniert - scheint brauchbar zu sein.

danke

Xean · 29.11.2006, 12:48

kein problem

$traight-$hoota · 02.12.2006, 15:44

also diese lösung finde ich noch nicht optimal.
denn das name-attribut sollte eigentlich auch eindeutig sein. korrekterweise muss in diesem fall das class-attribut verwendet werden.

javascript Code:

function toggle_button(name)
{
   var divs = document.getElementsByTagName('div');
   for(var i = 0; i < divs.length; i++){
      var div = divs&#91;i&#93;;
      if(div.getAttribute('class') == name)
         if(div.style.display == 'block'){
            div.style.display='none';
         }else{
            div.style.display='block';
         }
      }
   }
}

29.11.2006, 11:51	Nach oben #2
WarrenFaith Martin Breuer Registriert seit: 17.08.2005 Ort: Berlin Beiträge: 1.653	IDs dürfen nur Unique sein, also 3 mal "1" ist definitiv nicht gut und die andere Frage: warum nicht so: HTML-Code: <div style="display:block;" id="1"> <div style="display:block;"> <div>Hier<br>Steht<br>eine<br>Adresse<br>drin 1<br></div> </div> <div style="display:block;"> <div>Hier<br>Steht<br>eine<br>Adresse<br>drin 2<br></div> </div> <div style="display:block;"> <div>Hier<br>Steht<br>eine<br>Adresse<br>drin 3<br></div> </div> </div> __________________ I did it my way - Senseless-Blog Weihnachtsgeschenk? Schülern helfen - Bodypainting Kalender für 2009

29.11.2006, 12:15	Nach oben #5
Sclot Sven Schmalle Registriert seit: 18.08.2005 Ort: Bremen Beiträge: 160	ah... das hatte ich schon gestestet, da meinte er das es die Eigenschaft nicht gibt. Aber ich hatte GetElementByName - da fehlte ein s drin... ich versuchs nochmal, danke mhm... geht nicht Fehler: document.getElementsByName(name).style has no properties Quelldatei: file:///C:/Dokumente%20und%20Einstellungen/Sven/Desktop/test.html# Zeile: 6 Geändert von Sclot (29.11.2006 um 12:22 Uhr)

29.11.2006, 12:41	Nach oben #6
Xean Oliver O. Registriert seit: 17.08.2005 Beiträge: 427	Also gut. dann hätte ich hier ne zweite lösung, die vielleicht nicht sooo toll ist: Code: <html> <head> <script> function toggle_button(name) { var els = document.anchors; for(var i = 0; i < els.length; i++){ var el_name = els[i].name; if(el_name == name){ if(els[i].style.display == 'block') { els[i].style.display='none'; } else { els[i].style.display='block'; } } } } </script> </head> <div> <a href="#" onClick="javascript:toggle_button('1');">Ein/ausblenden </a> </div> <a style="display:block;" name="1"> <div> Hier <br>Steht <br>eine <br>Adresse <br>drin 1 <br> </div> </a> asdfasdf <a style="display:block;" name="1"> <div> Hier <br>Steht <br>eine <br>Adresse <br>drin 2 <br> </div> </a> asdfasdf <a style="display:block;" name="1"> <div> Hier <br>Steht <br>eine <br>Adresse <br>drin 3 <br> </div> </a> </html> statt divs hab ich links benutzt, die man ganz einfach mit document.anchors ansprechen kann. und wenn ich dann überbrüfe, ob der name stimmt, dann wird der display-zustand geändert. Eigenldich würde es jetzt auch mit ids funktionieren, aber das ist sehr hässlich dann wenn du jetzt für die links im css (wenn du sowas benutzt) eigenschaften gesetzt hast, dann musst du nur statt a{} a:link{} schreiben, und alles sieht aus wie vorher, außer, du hast die farbe des textes geändert... (als beweiß, dass es geht, hab ich noch paar buchstaben zwischen die link-elemente geschrieben) Geändert von Xean (29.11.2006 um 12:43 Uhr)

02.12.2006, 15:44	Nach oben #9
$traight-$hoota Johannes Müller Registriert seit: 15.09.2005 Ort: Königreich Flieden Beiträge: 550	also diese lösung finde ich noch nicht optimal. denn das name-attribut sollte eigentlich auch eindeutig sein. korrekterweise muss in diesem fall das class-attribut verwendet werden. javascript Code: function toggle_button(name) { var divs = document.getElementsByTagName('div'); for(var i = 0; i < divs.length; i++){ var div = divs[i]; if(div.getAttribute('class') == name) if(div.style.display == 'block'){ div.style.display='none'; }else{ div.style.display='block'; } } } } __________________ Weißt Bescheid - Scheiß wie weit

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

29.11.2006, 12:09	Nach oben #3
Sclot Sven Schmalle Registriert seit: 18.08.2005 Ort: Bremen Beiträge: 160	Weil die DIVs alle nicht zusammenhängend sind sondern nur als Adress-DIVs in einer tabellarischen Auflistung dienen. Da ich in einer Tabelle keine TD´s ein und ausblenden kann, wollte ich es mit DIVs machen.

29.11.2006, 12:46	Nach oben #7
Sclot Sven Schmalle Registriert seit: 18.08.2005 Ort: Bremen Beiträge: 160	ich teste... mhm.. jow.. funktioniert - scheint brauchbar zu sein. danke

29.11.2006, 12:48	Nach oben #8
Xean Oliver O. Registriert seit: 17.08.2005 Beiträge: 427	kein problem

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Höhe von div verändern, divs darunter je nach Größe verschieben	buddy_casino	JavaScript und AJAX	13	17.09.2007 12:49
mehrere Divs untereinander mit abschließenden DIV	suppenmann	HTML, XML und CSS	9	02.12.2006 16:14
Zwei divs - ein Problem	Jan	HTML, XML und CSS	4	14.03.2006 17:30
Mindestgröße für DIV's	Jan	HTML, XML und CSS	10	05.03.2006 17:44
Soetwas wie <legend> für divs ?	robo47	HTML, XML und CSS	14	09.10.2005 23:11