This is the simplest implementation of jQuery to hide and show, or toggle an element of a page that is not necessary to be shown when the page loaded. Or in a simple word called a spoiler.
I wrote an article about creating a spoiler before, but not using jQuery, entitled Simple Spoiler.
The first thing you need to do is to put jQuery in your HEAD section.
<head>
<script type=â€text/javascript†src=â€http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jsâ€></script>
</head>
First, you have to create a button or a link to trigger the effect. But I prefer a button since many forum use a button for a spoiler.
<input type=â€button†>spoiler1’).toggle(500);†value=â€Show/Hide Spoilerâ€/>
or
<input type=â€button†>spoiler1’).toggle(500);†value=â€Toggle Spoilerâ€/>
or
<a href=â€javascript:void(0)†>spoiler1’).toggle(500);†> Show me! </a>
Create a special Div for your image/content, make it hidden first (the very simple way is by using style=â€display:none;â€).
<div id=â€spoiler1†style=â€display:none;â€>
Your content here.. put some image, table, paragraph, anything…it will be hidden until you click the button..
</div>
That’s it.. Test it using the example below:
I’m hidden, don’t open me… hahahaha…
Finally i got it..
Dobby and Luna have been part of our lives for the past years. They have…
In the year 2021, I've completed some paid projects. Some of them are more technical,…
Based on the GlassTime Bootstrap template, here I present glassmorphism WordPress Theme free to download.This…
This HTML5 template is using Glassmorphism UI design language which is now trending for 2021…
KecamatanKode POSBanjar81152Buleleng81119Busungbiu81154Gerokgak81155Kubutambahan81172Sawan81171Seririt81153Sukasada81161Tejakula81173Klik pada nama kecamatan untuk melihat daftar desa masing-masing. Sumber: kodepos.andiim3.com
Ada yang bilang "semuanya akan mati matic pada akhirnya". Bener aja, sekarang tuntutan transportasi sehari-hari…
This website uses cookies.