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:
Nel markup non credo ci sia bisogno d'altro. Nel javascript, adesso, faremo in modo che:codice:<p id="testo"> Ciao, io sono il testo che appare e scompare. </p>
- 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;
- il fatto di essere visibile o meno venga gestito tramite CSS.
Pertanto:
Infine, nel CSS, impostiamo le due classi di stile:codice:// 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() }
Dovrebbe funzionare (è la prima volta che lo scrivo, quindi magari potrebbe essermi scappato qualcosa).codice:.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; }
Tag: mostra-nascondi accessibile


Rispondi quotando