[JS] Spoiler

Codice:

---

if (this[removed][removed].getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
    this[removed][removed].getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
    this.innerText = '';
    this.value = 'Nascondi';
} else {
    this[removed][removed].getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
    this.innerText = '';
    this.value = 'Mostra';
}

---

è troppo confuso!

ecco il mio

Codice HTML:

---

<div class="smallfont">
        <b>Archivio Edizioni:</b> <input onclick=
        "[codice sopra]"
        type="button" value="Mostra" class="uno">
    </div>

    <div class="alt2">
        <div class="due">
            TESTO TESTO
        </div>
    </div>

---

come lo sistemo?
sto imparando

Mh, la scelta di JS puro (Vanilla) è una scleta o è casuale?
Ovvero, si può utilizzare anche jquery per la risuluzione o vuoi farlo obbligatoriamente senza framework?

Ma no, chiedevo se per darti una soluzione posso usare jquery o vuoi tutto senza framework, c'è chi non usa (e non vuole usare) jquery.
Dimmi tu cosa vuoi come risposta, se jquery o js semplice. XD
;)

Codice HTML:

---

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/src/jquery-spoiler-master/jquery.spoiler.min.js"></script>
<script>
$(".spoiler").spoiler();
</script>
<div class="spoiler" data-spoiler-link="1">Spoiler</div>
<div class="spoiler-content" data-spoiler-link="1">ahia</div><!-- spoiler -->

---

non va... x,(
che sbaglio?

E' sbagliato il codice non tu :D c'è un riferimento a un sorgente locale.

cmq per spoilerare

Codice HTML:

---

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
.spoilerButton { cursor: pointer; }
.spoiler { display: none; }
</style>
<script>
$(function() {
        $(".spoilerButton").click(function() {
       
                spoiler = $(this).find('.spoiler');

                if(spoiler.css('display') == 'none') { spoiler.show();
                } else { spoiler.hide(); }
               
        });
});
</script>
<div class="spoilerButton">Cliccami per spoilerare!
        <div class="spoiler">Ommiodio! Ma lo sapevi che su Superman lui è allergico alla Kryptonite? <br>Nooooo? argh, scusa!</div>
</div>

---

Puoi usare css per dargli un design più carino e se vuoi puoi integrarci jquery-ui per fare effetti speciali quando lo spoiler "appare" o si "nasconde"
bye

Citazione:

---

Originalmente inviato da pxy

[...]

---

grazie mille

perchè se <script>[...]</script> lo metto dentro ad un *.js, lo spoiler non mostra?

<script>[...]</script> è la dichiarazione in un file *.html che stai iniziando a scrivere javascript, se vuoi importarlo da un file js puoi rimuovere i tag <script> e postare direttamente in codice nel file.
Assicurati poi che l'inclusione del file avvenga dopo l'inclusione di jquery.

index.html

Codice PHP:

---

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="miofile/spoiler.js"></script>


---

spoiler.js

Codice PHP:

---


$(function() {
$(".spoilerButton").click(function() {

spoiler = $(this).find('.spoiler');

if(spoiler.css('display') == 'none') { spoiler.show();
} else { spoiler.hide(); }

});
});


---