JS für show/hide Menu

[mschoening]

Hi,
ich habe mal dieses script geschrieben um ein <div /> sichtbar bzw. unsichtbar zu machen...

<script type="text/javascript">
//<![CDATA[
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        }
        else {
            e.style.display = 'block';
        }
    }
//]]>
</script>

und die function wird ausgeführt durch ein Link mit folgendem Code:

<a href="#" onclick="toggle_visibility('produkt1'); return false">toggle</a>

Im moment ist es jedoch so, dass man auch mehrere div's gleichzeitig auf haben kann. Wie bekomme ich das hin, dass immer nur ein div visible ist?

Thanks,
Max

 

[crossinger]

Wie viele DIVs sind es denn?

Ich würde eine Unterfunktion einbauen, die vorher alle DIVs durchläuft und auf HIDE setzt. (Habe ich in der Praxis auch so schon umgesetzt)


*J*

 

[mschoening]

Hi,
es sind 8 DIVs...die ganzen DIVs sind durch display: none; auf hide gestellt. Ich brauch nur noch eine Funktion die wenn ein DIV auf ist und ich ein anderes öffne, alle anderen zu gehen...und das bekomme ich nicht hin!

 

[crossinger]

Na, in etwa so:

function hideAllDivs() {
	var sDivId ="idname";
	for (var i=1; i<5; i++) {
   	  if(document.getElementById(sDivId+i)) {
			 hideDiv(sDivId+i);
		  }
	}
  }

Den DIVs vergibst Du einen einheitlichen Namen + Nummer, z.B. (oben im Code): idname1 bis idname5

That's it. Du rufst diese Funktion aus Deiner Funktion auf oder baust die Schleife in Deine Funktion ein.

*J*

 

[mschoening]

Hi,
ich bekomme die beiden Funktionen nicht zusammen...wie würde das gehen? Meine DIVs die ich toggeln will heißen produkt1 bi produkt8...

 

[crossinger]

OK, die Änderungen an meinem Code:

function hideAllDivs() {
	var sDivId ="produkt";
	for (var i=1; i<8; i++) {
   	  if(document.getElementById(sDivId+i)) {
			 hideDiv(sDivId+i);
		  }
	}
  }

Die Änderung an Deinem Code:

<script type="text/javascript">
//<![CDATA[
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display = 'none';
        }
        else {
            hideAllDivs();
            e.style.display = 'block';
        }
    }
//]]>
</script>

Ist jetzt ungetestet, sollte aber funktionieren. Zumindest ist es bei mir identisch aufgebaut.

*J*

 

[mschoening]

Hmm...das geht nicht ...

 

[crossinger]

Ich habe momentan leider kaum Zeit, mir das Problem nochmals vorzunehmen. Kann Dir also nix versprechen. Aber ich *versuche* zumindest mal, heute oder morgen eine kleine Demo mit HTML-Seite zu backen.

*J*

 

[mschoening]

Hi,
du das wär genial.

 

[mschoening]

Hi,
so geht es:

<script type="text/javascript">
//<![CDATA[                        
    function toggle_visibility(id) {
        if(toggle_visibility.last)  {
            toggle_visibility.last.style.display='none';
        }
        var e = document.getElementById(id);
        if(e.style.display == 'block') {
            e.style.display='none';
        }
        else e.style.display = 'block';
        toggle_visibility.last = e;
    }
//]]>
</script>

 

[crossinger]

OK, das letzte DIV merken ist auch eine Variante. Wenn Du's zufrieden bist, werde ich mich nicht nochmal dransetzen.

*J*