Testo a comparsa

Salve, vi espongo ciò che vorrei fare. Ho un testo piuttosto lungo da voler inserire in una pagina dividendolo in una o più parti e vorrei creare una sorta di "Mostra/Nascondi" cliccandoci sopra. Una cosa del genere:

Parte 1 (cliccando su parte 1 compare il testo della parte 1, ricliccandoci sopra scompare)

Parte 2 (cliccando su parte 2 compare il testo della parte 2, ricliccandoci sopra scompare)

Parte 3 (cliccando su parte 3 compare il testo della parte 3, ricliccandoci sopra scompare)

Come posso fare? Grazie in anticipo

Ciao :)

Fare una cosa simile non è complicato, ma devi conoscere JavaScript. Ti faccio un esempio di codice in modo da poter avere una mezza idea di come fare.

Supponiamo che la tua pagina abbia questa struttura:

Codice HTML:

---

<div id="parte-1">
    <h2>Testo 1</h2>
    <p>...</p>
</div>
<div id="parte-2">
    <h2>Testo 2</h2>
    <p>...</p>
</div>
<div id="parte-3">
    <h2>Testo 3</h2>
    <p>...</p>
</div>

---

Con i CSS fai in modo che i paragrafi siano inizialmente nascosti (così bisogna cliccare sopra il titolo h2 per poter visualizzare il testo):

Codice:

---

p {display: none}

---

Adesso viene la parte in JavaScript. L'idea è questa: avendo designato gli h2 come elementi cliccabili, quando ci clicchi sopra deve partire una funzione che ti consenta di visualizzare/nascondere il paragrafo successivo. Per capire quale operazione eseguire, devi controllare il valore della proprietà display: se questo è none allora significa che il paragrafo è nascosto e quindi devi visualizzarlo cambiando il valore in block, altrimenti siamo nella situazione in cui il paragrafo è visibile e dunque va nascosto.

Codice:

---

var handleText = function(e) {
    // Vedi http://javascript.info/tutorial/obtaining-event-object
    // per la compatibilità con IE
    e = e || window.event
    h2 = e.target || e.srcElement
   
    p = h2.nextElementSibling
   
    if(p.style.display == 'none')
        p.style.display = 'block'
    else
        p.style.display = 'none'
}

document.getElementById("parte-1").children[0].onclick = handleText
document.getElementById("parte-2").children[0].onclick = handleText
document.getElementById("parte-3").children[0].onclick = handleText

---

Inoltre con l'ausilio di un framework il codice è ancora più compatto. Ad esempio con jQuery diventa così:

Codice:

---

$('#parte-1, #parte-2, #parte-3').find('h2').click(function() {
    p = $(this).next('p')
   
    if(p.css('display') == 'none')
        p.css('display', 'block')
    else
        p.css('display', 'none')
})

---