[Javascript] Script spoiler

[_Gabriele]

Ciao a tutti,
stavo scrivendo uno script per emulare lo "spoiler" del forum, ma siccome non sono granchè in Javascript, ne ho trovato uno su internet e lo ho riadattato così:

Codice: Seleziona tutto

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
<div id="spoiler1" style="display: none;">
...adipiscing elit. Fusce eget justo est. Suspendisse vitae lacus ante. Curabitur vitae malesuada lorem. Duis a malesuada nunc. Nulla accumsan velit sit amet tortor dignissim tristique. Curabitur dignissim sem id malesuada ullamcorper. Fusce eu molestie diam. Fusce egestas sodales imperdiet. Vestibulum ornare commodo lorem, vel scelerisque libero. 
</div>
<button class="btn btn-mini" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''}else{document.getElementById('spoiler1') .style.display='none'}; " value="leggi tutto" type="button">leggi tutto</button>
</blockquote>

(in pratica dovrebbe venire una citazione di cui si legge solo un pezzo ed al click di un bottone si apre completa)
Penso sia corretto (?)... Il problema sta nel button: infatti cliccandolo si mostra il paragrafo, ma il testo del bottone rimane "leggi tutto".
C'è un modo per far cambiare anche il testo del bottone (da leggi tutto a chiudi e viceversa)?

Grazie in anticipo

[rpadovani]

Codice: Seleziona tutto

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
<div id="spoiler1" style="display: none;">
...adipiscing elit. Fusce eget justo est. Suspendisse vitae lacus ante. Curabitur vitae malesuada lorem. Duis a malesuada nunc. Nulla accumsan velit sit amet tortor dignissim tristique. Curabitur dignissim sem id malesuada ullamcorper. Fusce eu molestie diam. Fusce egestas sodales imperdiet. Vestibulum ornare commodo lorem, vel scelerisque libero.
</div>
<button id='button1' class="btn btn-mini" onclick="changeSpoiler('spoiler1', 'button1');" value="leggi tutto" type="button">leggi tutto</button>
</blockquote>

<script>
function changeSpoiler(spoilerId, buttonId) {
  var element = document.getElementById(spoilerId);
  var button = document.getElementById(buttonId);

  element.style.display = element.style.display === '' ? 'none' : '';
  button.innerHTML = element.style.display === '' ? 'Nascondi' : 'Leggi tutto';
}
</script>

Così il codice è il più generico possibile e puoi utilizzarlo per tutti gli spoiler che vuoi in una pagina. È importante creare funzioni che poi possano essere riutilizzate, invece di fare copia incolla in giro per la pagina :-)

[_Gabriele]

Codice: Seleziona tutto

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur...</p>
<div id="spoiler1" style="display: none;">
...adipiscing elit. Fusce eget justo est. Suspendisse vitae lacus ante. Curabitur vitae malesuada lorem. Duis a malesuada nunc. Nulla accumsan velit sit amet tortor dignissim tristique. Curabitur dignissim sem id malesuada ullamcorper. Fusce eu molestie diam. Fusce egestas sodales imperdiet. Vestibulum ornare commodo lorem, vel scelerisque libero.
</div>
<button id='button1' class="btn btn-mini" onclick="changeSpoiler('spoiler1', 'button1');" value="leggi tutto" type="button">leggi tutto</button>
</blockquote>

<script>
function changeSpoiler(spoilerId, buttonId) {
  var element = document.getElementById(spoilerId);
  var button = document.getElementById(buttonId);

  element.style.display = element.style.display === '' ? 'none' : '';
  button.innerHTML = element.style.display === '' ? 'Nascondi' : 'Leggi tutto';
}
</script>

Così il codice è il più generico possibile e puoi utilizzarlo per tutti gli spoiler che vuoi in una pagina. È importante creare funzioni che poi possano essere riutilizzate, invece di fare copia incolla in giro per la pagina :-)

Ah perfetto, così agisco direttamente sul bottone ed evito di riempire la pagina di Javascript..
Grazie molte