Spoiler, czyli przycisk pokaż/ukryj

Zaprezentuję, jak w prosty sposób stworzyć przycisk spoiler, aby ukryć jakąś treść na swojej stronie. Zacznę jednak od wyjaśnienia, co to jest spoiler.

Spoiler może wyjawiać szczegóły dotyczące rozwiązania kluczowego dla danego utworu napięcia dramatycznego czy pomysłu na którym oparty jest utwór i odbierać widzowi przyjemność z jego oglądania (czytania).

Przykład:

Tajny tekst do ukrycia! 🙂

Kod:

<div style="margin: 0px; margin-top: 5px;">
<div><input style="width: 60px; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].style.display != '') {this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = ''; this.innerText = ''; this.value = 'Ukryj';} else {this.parentNode.parentNode.getElementsByTagName('div')[1].style.display = 'none'; this.innerText = ''; this.value = 'Pokaż';}" type="button" value="Pokaż" /></div>
<div style="display: none;">
<div style="margin: 0px; padding: 6px;">Tajny tekst do ukrycia! :)</div>
</div>
</div>

{ 0 komentarze… dodaj teraz swój }

Odpowiedź