Byte Strike Blog

Nel breve tempo libero rimasto in questo finesettimana, ho deciso che le aree di appunti riguardanti Windows e Linux andavano risistemate.

Problema

Allo stato attuale, queste due aree vengono gestite come delle FAQ, in cui al click sul collegamento interno di una domanda si viene redirettati nella zona in cui risiede la risposta.

Ma con il tempo la pagina diventa caotica e l'ordine è presieduto solo dai collegamenti alle risposte, mentre il contenuto viene sbattutto nella pagina un poco alla volta.

Soluzione

La soluzione sta nel mostrare il testo di risposta ad una domanda immediatamente al di sotto della domanda stessa, permettendo di farlo apparire e di nasconderlo nuovamente al click del collegamento sulla domanda stessa.

Il codice:

 /* credits: http://www.webmasterworld.com/forum91/441.htm
* Mostra o nasconde una porzione di testo contenuta in tag DIV al click di un collegamento
* ipertestuale.
* E' sufficiente porre:

<div id="script" style="display: none">
....content...
<p><a onclick="showhide('script'); return(false);" href="#">Testo da cliccare</a></p>
*/
function showhide(id){
 if (document.getElementById){
  obj = document.getElementById(id);
  if (obj.style.display == "none"){
   obj.style.display = "";
  } else {
   obj.style.display = "none";
  }
 }
}

Come si può vedere il codice della risposta va messo all'interno di tag <div>, specificando come stile display: none per mantenerle nascoste fintanto che non si clicca sul collegamento della domanda.

Il collegamento della domanda specifica la funzione da attivare al click del mouse sul collegamento (trovate i dettagli e la fonte nei commenti nel codice qui sopra).

Per vedere in azione il codice, ecco una demo. Testato con successo sulle ultime versioni di Firefox, Opera e Internet Explorer in Windows.