Spoiler készítése | Fórum!

A spoiler a számítástechnikában egy olyan szöveg, ami olyan tartalmat rejt, amelyet nem mindenki szeretne elolvasni. Általában regények, filmek, videók végkifejletét tartalmazza. Idő előtti információ tönkreteheti a mű befogadásának élményét. Ezért az interneten, ha hasonló információt szeretnénk közölni, illik jelezni, hogy itt spoiler következik. Ahhoz, hogy az olvasó ne tekintsen véletlenül rá a szövegre, azt elrejtjük valamiképpen, hogy csak egy gomb megnyomására váljon láthatóvá.
Az alábbiakban megmutatom a spoiler készítésének egy nagyon egyszerű módját.

Egy spoiler fórumokban általában így néz ki:

Ha a "+" jelre kattintunk, a tartalom kinyílik és a "+" jel helyett "-" jelet találunk. Ha ismételten rákattintunk, a tartalom bezárul. Próbáljátok ki!

A forráskód pedig:


<div class="uSpoilerClosed" id="uSpoiler25XSnl">
<div class="uSpoilerButBl"><input class="uSpoilerButton" onclick="if($('#uSpoiler25XSnl')[0]){if ($('.uSpoilerText',$('#uSpoiler25XSnl'))[0].style.display=='none'){$('.uSpoilerText',$('#uSpoiler25XSnl'))[0].style.display='';$('.uSpoilerButton',$('#uSpoiler25XSnl')).val('[\–] Nyitva');$('#uSpoiler25XSnl').attr('class','uSpoilerOpened');}else {$('.uSpoilerText',$('#uSpoiler25XSnl'))[0].style.display='none';$('.uSpoilerButton',$('#uSpoiler25XSnl')).val('[+] Zárva');$('#uSpoiler25XSnl').attr('class','uSpoilerClosed');}}" type="button" value="[+] Zárva" /></div>

<div class="uSpoilerText" style="display:none;">Itt van a nagy titok!</div>
</div>


Ugye milyen egyszerű?
Arra vigyázzatok, hogy az "onclick"-től egészen a "type"-ig egyetlen szóköz se legyen!