Jassun spoilerit

Moiccu! Tällä sivulla on kaksi Javascript/jQuery-spoileritoteutusta. Saa kopsata jos tarvii.

Lisää tämä jQuery-kirjasto <head> ja </head>-tagien väliin. Tarvitset sitä riippumatta siitä, kumman spoilerin haluat sivuillesi.

            
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

1. Trigger-spoileri

Trigger-demo: Tämä on eka trigger-spoilerilinkki

Eka sisältö. Tämä spoilerityyli sopii sellaisille sivuille, joissa sisältö-div ei välttämättä ole heti avauslinkin alapuolella lähdekoodissa.

Tämä on toinen trigger-spoilerilinkki

Tämä on toinen togglattava sisältö. Toteutus perustuu linkin ja divin samannimisiin attribuutteihin (rel = id), jonka avulla jQuery-koodi osaa avata oikean laatikon, kun linkkiä painetaan.

Trigger-spoilerit koodimuodossa (vaihda tunniste-sana): Voit tehdä näitä niin monta kuin haluat! Muista, että "tunnisteen" on aina vastattava toisiaan, eikä kahta samalla tunnisteella olevaa linkkiä tai diviä saa olla.

            
<a class="trigger" rel="tunniste">Tämä on eka trigger-spoilerilinkki</a>

<div class="piilodiv" id="tunniste">Tämä on ekan spoilerilinkin togglattava sisältö</div>

Koska a-elementillä ei tässä toteutuksessa ole href-attribuuttia, tarvitset hiukan css:ää, jotta saat sen erottumaan muusta tekstistä. Voit muokata tätä makusi mukaan!
.piilodiv-classin määrittely on ainoa pakollinen.

            
.piilodiv {
    display:none; /* älä muuta tätä, tai muuten div ei oletuksena ole piilossa. */
}

.trigger {
    color:orange;
}

.trigger:hover {
    color:purple; 
    cursor:pointer;
}

Trigger-javascript (lisää sivun loppuun ennen </body>-tagia)

            
<script>
    $('.trigger').on('click', function (e){
        var target = $(this).attr('rel');
        
        
        // Seuraava rivi; togglen määritys, MULLA ON AUTOMAATIONA TÄMÄ:
        // .slideToggle('300'); = liukuu esiin, kestää 0,3 sekuntia
        
        // MUUT VAIHTOEHDOT, JOS ET TYKKÄÄ 0,3sek SLIDETOGGLESTA:
        // .fadeToggle('300'); = häivyttyy esiin, kestää 0,3 sekuntia
        // .toggle(); = ilmestyy esiin, ei animaatioita

        $("#"+target).slideToggle('300'); // tätä riviä voi muokata yllä olevien ohjeiden mukaan miten tykkää

        $('.piilodiv').not("#"+target).hide(); //poista tämä rivi jos et halua että vain yksi spoileri voi olla kerrallaan auki!
    });
</script>

2. Next-spoileri

Next-spoilerin demo: Tämä on next-spoilerin linkki

Tämä on next-spoilerin sisältö. Next-spoilerissa olennaista on, että avattavan divin tulee olla HETI linkin jälkeen, eli niiden välissä ei saa olla muita elementtejä.

Tämä on toinen next-spoilerin linkki

Häh, koodithan ovat aivan identtiset?? Jep, tässä toteutuksessa ei tarvitse tunnisteita. Klikkaamalla linkkiä linkin viereinen elementti avautuu, ja siksi on tärkeää, että avattava div sijaitsee heti linkkinsä jälkeen koodissa.

Next-spoileri koodimuodossa: Voit tehdä näitä niin monta kuin haluat! Sen kun kopioit molemmat rivit ja läiskit minne lystää, niin monta kertaa kuin tarvii. Tärkeää on, ettet laita linkin ja divin väliin mitään, vaan div on HETI linkin alapuolella, muuten koodi ei osaa avata oikeaa laatikkoa.

            
<a class="spoileri">Tämä on next-spoilerin linkki</a>

<div class="spoileri">Tämä on next-spoilerin sisältö.</div>

Koska a-elementillä ei tässä toteutuksessa ole href-attribuuttia, tarvitset hiukan css:ää, jotta saat sen erottumaan muusta tekstistä. Voit muokata tätä makusi mukaan!

            
.spoileri:not(a) {
    display:none; /* älä muuta tätä, tai muuten div ei oletuksena ole piilossa. */
}
                
a.spoileri {
    color:deeppink; /* linkin väri, voit muuttaa tai poistaa */
}

a.spoileri:hover {
    cursor:pointer;
    color:yellowgreen; /* linkin hover-väri, voit muuttaa tai poistaa */
}

Next-spoilerin Javascript-osuus (lisää sivun loppuun ennen </body>-tagia)

            
<script>
    $( "a.spoileri" ).click(function () {
        $(this).next().slideToggle(300); // voit vaihtaa tähän eri toggletyylin, jos haluat, ks alempi:
        
        // MUUT VAIHTOEHDOT, JOS ET TYKKÄÄ 0,3sek SLIDETOGGLESTA:
        // .fadeToggle(300); = häivyttyy esiin, kestää 0,3 sekuntia
        // .toggle(); = ilmestyy esiin, ei animaatioita
        
    });
</script>