Show Hide a metà

**Vivio** · 31-12-2007, 18:58

VVoVe: Ho utilizzato una Funzione già pronta per mostrare e/o nascondere 2 DIV, e due bottoni per visualizzare alternativamente i due DIV, ma quando clicco sul secondo bottone non mi cancella del tutto il primo DIV .
In sostanza accade che devo fare due volte clik sul primo bottone per attivare e poi disattivare il primo DIV ; dopo aver disattivato con il secondo click (sul primo bottone) posso attivare il secondo DIV facendo click sul secondo bottone, devo poi fare un altro click sul secondo bottone per cancellare il secondo DIV per poi poter ripassare al primo.
In realtà io vorrei un solo click sul primo bottone per mostrare il primo DIV e facendo poi click sul secondo bottone, cancellare il primo DIV e mostrare il secondo !

ecco la funzione

function mostraBox(szDivID) {
if (document.layers) { // NN4+
if (document.layers[szDivID].visibility == 'visible') {
document.layers[szDivID].visibility = "hide";
document.layers[szDivID].display = "none";
document.layers[szDivID+"SD"].fontWeight = "normal";
} else {
document.layers[szDivID].visibility = "show";
document.layers[szDivID].display = "inline";
// document.layers[szDivID+"SD"].fontWeight = "bold";
}
} else if (document.getElementById) { // gecko(NN6) + IE 5+
var obj = document.getElementById(szDivID);
// var objSD = document.getElementById(szDivID+"SD");

if (obj.style.visibility == 'visible') {
obj.style.visibility = "hidden";
obj.style.display = "none";
objSD.style.fontWeight = "normal";
} else {
obj.style.visibility = "visible";
obj.style.display = "inline";
objSD.style.fontWeight = "bold";
}
} else if (document.all) { // IE 4
if (document.all[szDivID].style.visibility == 'visible') {
document.all[szDivID].style.visibility = "hidden";
document.all[szDivID].style.display = "none";
// document.all[szDivID+"SD"].style.fontWeight = "normal";
} else {
document.all[szDivID].style.visibility = "visible";
document.all[szDivID].style.display = "inline";
// document.all[szDivID+"SD"].style.fontWeight = "bold";
}
}
}

e questi sono i due bottoni

<INPUT TYPE="button" value="DIV_1'" onClick="mostraBox('formalita',1); mostraBox('soggetti',0);">

<INPUT TYPE="button" value="DIV_2" onClick="mostraBox('soggetti',1); mostraBox('formalita',0);">

e i due DIV :

<div ID="formalita"> primo blocco più query SQL ed HTML</div>
<div ID="soggetti" > secondo blocco ed altro cidice + query SQL ed HTML</div>

Spero che qualcuno possa aiutarmi a venirne a capo ?

**fcaldera** · 31-12-2007, 19:12

ad una prima analisi vedo due errori

1) la funzione Mostrabox accetta un argomento, ma tu la richiami passando due parametri

2) hai commentato l'assegnazione alla variabile objSD

codice:

// var objSD = document.getElementById(szDivID+"SD");

però nelle righe successive la funzione compie delle operazioni su di essa.

**fcaldera** · 31-12-2007, 19:15

inoltre c'è un errore logico

il div viene fatto sparire facendo cambiare le proprietà visibility e display. Ma quando viene fatto riapparire gli viene assegnato display: inline e questo non è corretto poichè ad un elemento blocco come un <div> dovrebbe essere assegnato display: block;

**Vivio** · 31-12-2007, 19:24

Come ho già detto ho riutilizzato una Funzione trovata su internet, non sono all'altezza (purtroppo) di scriverla io sigh!, potresti quindi suggerirmi le modifiche, in praticaaggiungi e togli quello che vuoi dalla funzione, solo dopo potrò tentare di capire come funziona il tutto .
Grazie

**fcaldera** · 31-12-2007, 19:31

codice:

<script type="text/javascript">
function $id(id) { return (document.getElementById)? document.getElementById(id) : document.all[id];}

function mostraBox(id) { $id(id).style.display = 'block';}
function nascondiBox(id) { $id(id).style.display = 'none';}
</script>

...

<body>
<input type="button" onclick="mostraBox('formalita'); nascondiBox('soggetti');">
<input type="button" onclick="mostraBox('soggetti'); nascondiBox('formalita');">

<div id="formalita"> primo blocco più query SQL ed HTML</div>
<div id="soggetti" > secondo blocco ed altro cidice + query SQL ed HTML</div>
</body>

**Vivio** · 31-12-2007, 19:41

Originariamente inviato da fcaldera

codice:

<script type="text/javascript">
function $id(id) { return (document.getElementById)? document.getElementById(id) : document.all[id];}

function mostraBox(id) { $id(id).style.display = 'block';}
function nascondiBox(id) { $id(id).style.display = 'none';}
</script>

...

<body>
<input type="button" onclick="mostraBox('formalita'); nascondiBox('soggetti');">
<input type="button" onclick="mostraBox('soggetti'); nascondiBox('formalita');">

<div id="formalita"> primo blocco più query SQL ed HTML</div>
<div id="soggetti" > secondo blocco ed altro cidice + query SQL ed HTML</div>
</body>

Scusami ma forse non ho capito come utilizzare il tuo Codice, ho eliminato la mia funzione ed ho copiato le tue nuove funzioni, ho anche modificato i bottoni secondo quanto hai segnalato, ma adesso non mostra e non nasconde niente !!!! Help

**Vivio** · 31-12-2007, 19:46

Scusami fcaldera, il tuo codice funziona alla grande...... era il mio CSS che creava problemi, grazie ancora.
Permettimi di aggiungere, che quasi sempre la strada più semplice è la migliore.

Discussione: Show Hide a metà

Strumenti discussione

Ricerca discussione

Visualizza

Show Hide a metà

Chiarimenti

Ancora problemi

Ok risolto

Permessi di invio