Dölj div, on/off + toggle

5 svar · 633 visningar · startad av Mattias Nordin 16 sep. 2006

Mattias NordinMedlem sedan dec. 20051 056 inlägg

Frågan16 sep. 2006 10:07#1

Hej alla glada!

Jag försöker få till en funktion som döljer / visar ett lager (div). I och med mina begränsade kunskaper i javascript så sökte jag på google och fann:

<script language="javascript"> 
// FUNCTION TO HANDLE HIDING OF DIV...
var state = 'none'; 
function showhide(layer_ref) { 
	if (state == 'block') { 
	state = 'none'; 
	} 
	else { 
	state = 'block'; 
	} 

	if (document.all) { //IS IE 4 or 5 (or 6 beta) 
	eval( "document.all." + layer_ref + ".style.display = state"); 
	} 

	if (document.layers) { //IS NETSCAPE 4 or below 
	document.layers[layer_ref].display = state; 
	} 

	if (document.getElementById &&!document.all) { 
	hza = document.getElementById(layer_ref); 
	hza.style.display = state; 
	} 
} 
</script>

Denna fungerar bra men jag skulle behöva komplettera den så att jag kan har möjligheterna:

Toggle on/off som det fungerar ovan.
Sätt till off enbart.
Sätt till on enbart.

Antar att det är ganska lätt när man förstår koden ovan. Kod exemplet ovan kanske inte är så bra?

Hjälp mottages tacksamt.

PS har för mig att jag har ställt en liknande fråga tidigare men kan inte finna den DS

nitro2k01Medlem sedan aug. 20039 340 inlägg

16 sep. 2006 14:37#2

Här är en ganska flexibel funktion som jag har skrivit:

<script type="text/javascript">
function $(s){
    if ('string'==typeof s)
        return document.getElementById(s);
    else
        return s;
}

function toggle(el, state){
	var els=$(el).style;

	if ('undefined' != typeof state)
		els.display=state?'block':'none';
	else
		els.display=(els.display=='block')?'none':'block';
}

</script>

Exempel:
toggle('lager1'); // Toggla
toggle(document.getElementById(lager2), true); // Visa
toggle(this, false); /* Göm (this can du bara använda på detta sätt
inline i en event handler, t ex <img onclick="toggle(this, false);" />) */

Mattias NordinMedlem sedan dec. 20051 056 inlägg

17 sep. 2006 11:22#3

Snyggt !

Mattias NordinMedlem sedan dec. 20051 056 inlägg

11 mars 2007 10:15#4

Hej igen,

Jag behöver lite assistans med Nitros kodovan. Tanken är väl att den ska fungera typ som följande!?

<script type="text/javascript">
function $(s){
    if ('string'==typeof s)
        return document.getElementById(s);
    else
        return s;
}

function toggle(el, state){
	var els=$(el).style;

	if ('undefined' != typeof state)
		els.display=state?'block':'none';
	else
		els.display=(els.display=='block')?'none':'block';
}
</script>

<div id="test2" name="test2">
Dölj / visa denna text...
</div>

<script type="text/javascript">
toggle(document.getElementById(test2), false);
</script>

Jag gör dock fel någonstans för jag får varken något felmeddelande eller resultat. Jag har labbat lite med funktionen men då javascriptet är lite grekiska så vet jag inte ens vad som borde ske.

Det jag resultat jag förväntar mig är att mitt exempel ovan ska dölja innehållet i <div id=test2>

Vad gör jag för fel?

Peter SMedlem sedan dec. 20025 483 inlägg

11 mars 2007 10:23#5

<script type="text/javascript">
toggle(document.getElementById([red]"test2"[/red]), false);
</script>

Mattias NordinMedlem sedan dec. 20051 056 inlägg

11 mars 2007 10:33#6

Åååå... vet inte om man blir frusterarad över att missa en sådan sak eller om man blir glad för att det var så enkelt att fixa. Tack.