nascondere/visualizzare un oggetto

[xalfryx]

Obiettivo:
1° click ...far apparire l'oggetto (menu1a)
click successivi....se l'oggetto è visibile -> nasconderlo, se nascosto -> renderlo visibile.

Cosa sbaglio?

function show_hide(object) {
if(document.getElementById(object).style.visibilit y = visible) {
document.getElementById(object).style.visibility = hidden
}
elseif(document.getElementById(object).style.visib ility = hidden) {
document.getElementById(object).style.visibility = visible;
}
}


Richiamo funzione:

.....onclick="show_hide('menu1a')"....



Grazie

[xalfryx]

up

[xalfryx]

nessuno mi sa aiutare?

[Luca450Mhz]

Prova a mettere visible e hidden tra i doppi apici ("visible" e "hidden") così dovrebbe funzionare.

Ciao Luca.

[pierofix]

Si può anche provare ad adottare una soluzione meno invasiva e decisamente più accessibile, oltre che più ordinata.

Facciamo caso di avere un elemento di questo tipo:

<p id="testo">
   Ciao, io sono il testo che appare e scompare.
</p>

Nel markup non credo ci sia bisogno d'altro. Nel javascript, adesso, faremo in modo che:

1. il pulsante per accendere e spegnere il testo venga inserito nella pagina da javascript; in caso js fosse disattivato, infatti, avremmo altrimenti nel documento un pulsante inutile;
   
2. il fatto di essere visibile o meno venga gestito tramite CSS.

Pertanto:

// Creiamo il pulsante
   // Creiamo un elemento 'a'
   var pulsante = document.createElement('a')
   // Creiamo i due testi di questo pulsante
   var pulsante_testo_acceso = document.createTextNode('Nascondi')
   var pulsante_testo_spento = document.createTextNode('Mostra')
      // e facciamo in modo che all'inizio il testo sia 'Nascondi'
      pulsante.appendChild(pulsante_testo_acceso)
   // Inseriamo il pulsante nella pagina
   var pagina = document.getElementsByTagName('body').item(0)
   var testo = document.getElementById('testo')
   pagina.insertBefore(pulsante, testo)
   // e diciamo che il testo, all'inizio, sarà visibile
   testo.className = 'visibile'
// Creiamo la funzione
function interruttore()
{
   // Controlliamo la classe associata al testo
   if ( testo.className == 'visibile' )
   {
      testo.className = 'invisibile'
      pulsante.removeChild(pulsante_testo_acceso)
      pulsante.appendChild(pulsante_testo_spento)
   }
   else
   {
      testo.className = 'visibile'
      pulsante.removeChild(pulsante_testo_spento)
      pulsante.appendChild(pulsante_testo_acceso)
   }
}
// Attribuiamo la funzione all'onclick del pulsante
pulsante.onclick = function()
{
   interruttore()
}

Infine, nel CSS, impostiamo le due classi di stile:

.visibile
{
   position:relative; top:0;
   width:auto; height:auto;
   overflow:none;
}
.invisibile
{
   position:absolute; top:-100px;
   width:1px; height:1px;
   overflow:hidden;
}
a
{
   color:blue;
   text-decoration:underline;
   cursor:pointer;
}

Dovrebbe funzionare (è la prima volta che lo scrivo, quindi magari potrebbe essermi scappato qualcosa).

Tag: mostra-nascondi accessibile