✔ Toggle expand all/collapse

[morgenstern]

Hallo!

Ich habe folgendes Problem, habe schon gesucht, aber einfach nichts passendes gefunden.

Ich benützte ein Toggle script, welches so aufgebaut ist.

function flip(span_id)
{
 if ( !document.getElementById(span_id) ) return;
if ( document.getElementById(span_id).style.display == "none" )
 {
 document.getElementById(span_id).style.display = "block";
  }
 else
 {
  document.getElementById(span_id).style.display = "none";
 }
}

Aufgerufen wird es nun so:

<img src="plus.gif" id="test_1"><a onclick="flip('test_1'); return false;" href="#">MAIN</a>
 <span id="test_1" style="display: none;">SUB</span>
<img src="plus.gif" id="test_2"><a onclick="flip('test_2'); return false;" href="#">MAIN2</a>
 <span id="test_2" style="display: none;">SUB2</span>

Nun würde ich gerne ein Link anbringen, um alle auszuklappen oder alle zu schliessen, aber es sollten sich auch die Bilder ändern (von plus auf minus und umgekehrt)

Hier schon mein zweites Problem: Wie kann das Plus-Bild mit dem Minus-Bild ersetzen?
Es wird sicherlich über eine ID gehen, und jedes Bild, jeder Layer hat dann über php eine eigene ID, nur wie kann man dies umsetzen?

Vielen Dank!

Grüße
morgenstern

 

[con-f-use]

Erstmal nur was zum Handwerk: Eine id muss Dokumentweit eindeutig sein, d.h. du darfst dem Bild nicht die gleiche ID wei den Spans geben, denn das produziret schwere Fehler.

Was das mit dem Bildern angeht, würdeIch für meinen Teil es so machen:

<script type="text/javascript"><!--
    function flip(span_id) {
    	if (obj = document.getElementById(span_id))
    		obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
    	if (img = document.images[span_id])
    		img.src = img.src == 'minus.gif' ? 'plus.gif' : 'minus.gif';
    	return false;
    }
    //-->
    </script>
    
    <img src="plus.gif" name="test_1"><a onclick="return flip('test_1');" href="#">MAIN</a>
    	<span id="test_1" style="display: none;">SUB</span>
    <img src="plus.gif" name="test_2"><a onclick="return flip('test_2');" href="#">MAIN2</a>
    	<span id="test_2" style="display: none;">SUB2</span>

*** Script not tested ***

Alles aus- bzw. einklappen kannst du dann mit einer for-Schleife. Wie das genau funktioniert musst du aber selber herausfinden, denn etwas Grundwissen und Grundintelligenz ist vorauszusetzten.

 

[morgenstern]

Hallo.

Danke für deine Hilfe.

Ich habe das problem mit den Bildern jetzt so gelöst:

 function flip(id)
{
 if ( !document.getElementById(id) ) return;
 if ( document.getElementById(id).style.display == "none" )
 {
 document.getElementById(id).style.display = "block";
 document.getElementById("bild_" + id).src = "minus.gif";
 }
 else
 {
 document.getElementById(id).style.display = "none";
 document.getElementById("bild_" + id).src = "plus.gif";
 }
}

Mir ist schon bewusst, dass eine ID einzigartig sein muss, bin leider nur halbwegs gut in php, aber javascript ist noch nicht so meins.

Beim Expand und Collapse fehlt mir leider zurzeit der Durchblick. Ich habe zwar eine Lösung in PHP, diese ersetzt einfach überall das display: none mit display:block und umgekehrt, dies funktioniert auch, nur werden hier die Bilder natürlich nicht ersetzt.

Ich werde mich weiter mit dem Problem beschäftigen.

edit: Nach logischer Überlegung muss dies mit der for Schleife mit einer Variable aufgebaut werden, die zuerst auf 0 gesetzt wird und sich erhöht bis das Ende erreicht wurde, wie als würde man ein array mit einer for Schleife aufrufen. Ist dies ungefähr korrekt?

 

[con-f-use]

Also bei mir funktioniert mein Script - da stellt sich mir die Frage: Wie hast du es eingebaut und was genau hat nicht funktioniert (evtl. Fehlermeldung in der JS-Konsole deines Browsers mitposten)?
Ansonsten versuch es mal mit (und achte auch genau auf den HTML-Teil!):

<script type="text/javascript"><!--
    function flip(span_id) {
    	if (obj = document.getElementById(span_id))
    		obj.style.display = obj.style.display == 'none' ? 'block' : 'none';
    	if (img = document.images[span_id])
    		img.src = img.src.match(/plus\.gif$/) ? 'minus.gif' : 'plus.gif';
  	return false;
    }
    //-->
    </script>
    
    <img src="plus.gif" name="test_1" /><input onclick="return flip('test_1');" type="button" value="MAIN1" />
    	<span id="test_1" style="display: none;">SUB</span>
    <img src="plus.gif" name="test_2" /><input onclick="return flip('test_2');" type="button" value="MAIN2" />
    	<span id="test_2" style="display: none;">SUB2</span>

Egal, was die Schleife angeht:

Hier mal ein Beispiel für das Zuklappen aller <spans>:

for(i=1;i<=AnzahlDerDivs;i++) {
      document.getElementById('test_'+i).style.display= 'none';
      document.getElementById('bild_test_'+i).src = 'plus.gif';
 }

Wobei du "AnzahlDerDivs" durch die tatsächliche Anzahl ersetzten musst. Ich bin davon ausgehen, dass deine <span>-Tags Ids nach dem Schema "test_1", "test_2", "test_3" usw. und deine Bilder welche nach dem Schema "bild_test_1", "bild_test_2", "bild_test_3" usw. haben. Und darauf hättest du wirklich selber kommen können, daher mein vielleicht etwas gemeiner Seitenhieb mit der Grundntelligenz.

 

[morgenstern]

Gut, ich spiele mich weiter mit dem problem.

Nur bekomme ich eine Fehlermeldung, dass die visibilityeigenschaften nicht gefunden wurden.

Nun habe ich den Code umgeschrieben:

function hideall()
{
for(i=1;i<=15;i++) {
     document.getElementById('main_'+i).style.display = "none";
     document.getElementById('bild_main_'+i).src = 'plus.gif';
    }
for(j=1;j<=15;j++) {
     document.getElementById('sub_'+j).style.display = "none";
     document.getElementById('bild_sub_'+j).src = 'plus.gif';
    }
}

Dies geht auch, nur bekomme ich die JS Fehlermeldung: Objekt erforderlich.

Eine Funktion zum ausklappen aller habe ich auch geschrieben.

function showall()
{
for(i=1;i<=15;i++) {
     document.getElementById('main_'+i).style.display = "block";
     document.getElementById('bild_main_'+i).src = 'minus.gif';

    }
for(j=1;j<=15;j++) {
     document.getElementById('sub_'+j).style.display = "block";
     document.getElementById('bild_sub_'+j).src = 'minus.gif';

    }
}

Selbe Fehlermeldung. Gehen würde es, aber es werden nur die main ausgeklappt, der Rest nicht.

Jetzt kommt aber noch folgender Punkt hinzu:

Ich hab nun auch ein Sub-Span mit dem Namen sub_id, also sieht es zurzeit so aus.

+ MAIN
+ SUB
+ Inhalt

Das geht eigentlich problemlos, auch mit den ändern des Bildes (plus und minus).

Es sollte auch am Anfang alles ausgeklappt sein, dies habe ich mit onload gelöst, nur klappt er mir nie den Inhalt aus sondern nur die SUBs.

Ich habe es wirklich lange durchprobiert, leider komme ich einfach nicht drauf. Kann daran liegen, dass ich seit Freitag krank bin, oder einfach, dass ich es nicht schnalle. :/

PLS Help.

Danke

 

[con-f-use]

...Dies geht auch, nur bekomme ich die JS Fehlermeldung: Objekt erforderlich...

Das wird wohl daran liegen, dass nicht jede Id existiert oder ähnliches. Versuchch's mal so:

function hideall() {
  	for(i=1;i<=15;i++) {
  		if(obj=document.getElementById('main_'+i))
  			obj.style.display = "none";
  		if(img=document.getElementById('bild_main_'+i)) 
  			img.src = 'plus.gif';
  	}
  	for(j=1;j<=15;j++) {
  		if (obj=document.getElementById('sub_'+j))
  			obj.style.display = "none";
  		if (img=document.getElementById('bild_sub_'+j))
  			img.src = 'plus.gif';
  	}
  }

 

[morgenstern]

Vielen Dank, klappt jetzt wunderbar

THX a lot!