Visto che mi è stato richiesto vi mostro come far sparire e riapparire a comando un pezzo di html con un pezzettino di javascript.

I passi sono 3 e semplicissimi,

  1. Dare un id a un pezzo di html
  2. Mettere un "pulsante" che faccia comparire/sparire il pezzo del punto 1
  3. Mettere nella pagina una funzioncina javascript
Farò un esempio specifico e vi mostrerò come far sparire un widget (una sezione) nella sidebar (la barra laterale) di un blog su blogspot.
Dobbiamo accedere alla nostra bacheca e premer il link "layout" relativo al blog da modificare, dopodichè un click su "html" (è uno dei tab nel sottomenù). Infine spuntate "Espandi i modelli widget"

(Questo pezzetto è per "approfondimento") Quello che vedete è il sorgente del vostro blog, è un misto di html e di tag speciali appartenenti a un linguaggio di programmazione a tag (vedi tag library tipo quella di struts per java).

La prima cosa da fare è identificare il pezzo di html che vogliamo far sparire. Deve essere il tag html che contiene tutte le informazioni da rendere visibili/invisibili. Ad esempio se vogliamo far sparire il widget delle labels cercheremo questo pezzo nel sorgente del blog:

<b:widget id="Label1" locked="false" title="Labels" type="Label">

[Ogni widget ha una composizione simile, basta beccare l'id del widget]
Terremo il titolo "labels" come visibile nella pagina e farà da bottone, il resto dovrà sparire.
All'interno del tag che abbiamo trovato prima, cerchiamo questo div:

<div class="widget-content">

e vi aggiungiamo un id

<div id="menu_labels" class="widget-content">

[Il nome deve essere univoco su tutta la pagina html, nel nostro caso su tutto il sorgente del blog]

Ora facciamo diventare il titolo un bottone, aggiungeremo quindi una chiamata javascript sull'evento click di un pezzo di html.
Nel nostro caso, poco più sopra al div a cui abbiamo aggiunto l'id vi è un tag h2 come questo:

<h2><data:title/></h2>

aggiungiamo a lui[1] l'evento.

<h2 onclick="showHide('menu_labels')" ><data:title/></h2>

[menu_labels è l'id che abbiamo dato al div del punto 1]


Ora non resta che mettere la funzione showHide (il nostro pezzo di javascript) nella pagina. La cosa più veloce è piazzare il seguente pezzo di javascript all'interno del tag head della pagina, ad esempio per il sorgente del blog, sotto il tag title andrà benissimo (il codice lo commentai tempo fa per un amico, quindi può risultare strano alla lettura):

<script>
//questo metodo mostra un elemento se è invisibile o lo nasconde se è visibile
//cambiandogli l'attributo display. Se alla fine del metodo il nodo è visibile
//torna true, altrimenti torna false
function showHide(nodeId,showType) {
 //prendo l'oggetto DOM relativo al nodo da mostrare/nascondere
 var node = document.getElementById(nodeId);
 //se è invisibile (display:none) lo faccio apparire
  if (node.style.display == "none") {
  //ignora showType per ora (nel blog nn lo uso, l'ho messo nel codice
  //per completezza/uso futuro)
  if (showType) {
   node.style.display = showType;
  } else {
   //[oggetto DOM relativo a un tag html].style è un oggetto che
   //contiene il CSS settando display a "" il nodo appare
   node.style.display = "";
  }
  
  return true;
   
  } else {
   //se il nodo è visibile lo rendo invisibile settando display a none
     node.style.display = "none";
  return false;
  }
}

<script>



Tutto qui :-)
Attenzione, tutto ciò che avete visto ha una sua logica, non smanettateci troppo se non avete confidenza con javascript html e il sorgente del template di blogger. Per problemi specifici ci sono i commenti.

PS:
Sempre relativamente al blog, ci sono degli aggiustamenti che si possono fare.
Primo, se desiderate che il pezzo parta invisibile modificate il div del punto 1 come segue:

<div id="menu_labels" class="widget-content" style="display:none;">


Così come mostrato il pulsante non sarebbe molto intuitivo, potete però cambiare i css per mostrare ad esempio la freccina del click o illuminare il tag al passaggio del mouse...ma non è il mio campo e vorrei evitare di darvi dritte potenzialmente incorrette...io personalmente uso qualcosa del tipo aggiungere una classe css al tag h2:

<h2 class="sidemenu" onclick='showHide("menu_labels")'><data:title/></h2>

e aggiungere la classe al css (nel template di blogger potete mettere tutto dove vi sono gli altri css)

h2.sidemenu:hover {
 background-color:yellow;
       cursor:pointer;
}


[1] non so perchè ma sono abituato a dare del lui alle cose relative a un pc, tipo lui per indicare un software, un pezzo di codice o una macchina (un PC).