Evento click->sp/apparizione div

[lomiz]

Salve a tutti. chiedo il vostro aiuto perchè riguardo a javascript sono l'ignoranza in persone ma (purtroppo) mi tocca usarlo.
Detto questo presento il mio problema.
Sto' creando un sito con un layout a due colonne, quell dei contenuti e quella della navigazione.
La navigazione non contiene soltanto il menù ma altre cose.
il mio obbiettivo e di creare uno script che cliccando sul titolo di uno degli argomenti presenti nella navigazione (ad esempio "i tuoi dati", "calendario") compaia sotto il contenuto e che scompaia con un secondo click.
Insomma: comparsa e scomparsa elemento all'evento click.
La mia poca intelligenza mi ha fatto ragionare di mettere il contenuto dentro un div che sarà appunto quello che dovrà sparire o no.
Non so come funziona Javascript ma pensavo che l'evento click provacasse l'inversione di una variabile booleana (0 per chiuso/invisibile , 1 per aperto/visibile)

Questo è tutto quello che so', spero che possiate suggerirmi qualche script e qualche funzione utile perchè per il mio rarissimo utilizzo di javascript sarebbe un assurdità ed uno spreco di tempo mettersi a studiarlo (non tanto la sintassi ma i "trucchetti" del linguaggio)

Grazie a tutti. Saluti

[floyd]

ad esempio

<div id="sezione" style="display: none">...</div>
<input type="button" onclick="showHideSezione()"/>
<script>
function showHideSezione() {
  var sezione = document.getElementById('sezione');
  if (sezione.style.display == 'none')
    sezione.style.display = 'block';
  else
    sezione.style.display = 'none';
}
</script>

[lomiz]

Ok grazie.
Ecco ho adattato il codice ottenendo questo.
tolto la funzione che ho incluso in un file js esterno ecco il restante codice:

		<p class="subtitle" onclick="showHideSezione()">I tuoi dati [img]images/icon_bottom.gif[/img][img]images/icon_top.gif[/img]</p>
		<div id="sezione" style="display: none">
			<p class="text"><?echo $_SERVER["REMOTE_ADDR"]; ?></p>
			<p class="text"><?echo $_SERVER["HTTP_USER_AGENT"]; ?></p>
		</div>

Vorrei adesso rendere visibile una delle immagini per ogni stato (in pratica sono due frecciette, quando la sezione è aperta/visibile ne visualizza una, quando è chiusa/invisibile l'altra).
Basta un controllo if sul valore della variabile?
Grazie

[floyd]

io metterei una sola img e gli cambierei il src
[img]images/icon_bottom.gif[/img]

function showHideSezione() {
  var sezione = document.getElementById('sezione');
  var immagine = document.getElementById('immagine');
  if (sezione.style.display == 'none') {
    sezione.style.display = 'block';
    immagine.src = 'images/icon_bottom.gif';
  } else {
    sezione.style.display = 'none';
    immagine.src = 'images/icon_top.gif';
  }
}

[lomiz]

Ecco erano questi i trucchetti che indetendevo

P.S. Ti chiedo questa cavolatina anche se è la sezione sbagliata perchè mi sembra un assurdità occupare un topic per questo: nei css come faccio comparire la manina quando il mause va sopra al al paragrafo come nei link? Che proprietà?
Grazie

[floyd]

cursor: pointer
http://www.devguru.com/technologies/css2/8083.asp

[lomiz]

graccie

[gordian]

Originariamente inviato da floyd
io metterei una sola img e gli cambierei il src
[img]images/icon_bottom.gif[/img]

function showHideSezione() {
  var sezione = document.getElementById('sezione');
  var immagine = document.getElementById('immagine');
  if (sezione.style.display == 'none') {
    sezione.style.display = 'block';
    immagine.src = 'images/icon_bottom.gif';
  } else {
    sezione.style.display = 'none';
    immagine.src = 'images/icon_top.gif';
  }
}

Ciao,
questo pratico esempio serve anche a me, ma io avrei l'esigenza di utilizzare più menu a comparsa nella stessa pagina.
Come potrei fare per far sì che per ogni bottone si apra il menu relativo e non sempre il primo?

[lomiz]

Ciao. ANche io avevo il tuo problema. Nella mia ignoranza ho risolto utilizzando più funzioni

[gordian]

Originariamente inviato da lomiz
Ciao. ANche io avevo il tuo problema. Nella mia ignoranza ho risolto utilizzando più funzioni

Ma c'è sicuramente il metodo e secondo me è pure semplice, il problema è che non conosco JS.

Io, per tentativi, sono riuscito a gestire il menu, ma non ad associare il cambiamento dell'immaginina al DIV giusto.
In pratica modificando questa riga della funzione:

var sezione = document.getElementById(menuCorrente);

Questa riga nella ricerca dell' immagine:

onclick="showHideSezione(menuCorrente = 'uno')"

e di conseguenza l'ID del blocco:

<div id="uno" style="display: none">

Riesco a gestire più blocchi correttamente, ma l'immagine si scambia sempre e solo nel primo DIV

Chi può aiutarci?