<< Back

Basic spoilers

Don't worry, I promise not to spoil any of your favorite shows: I don't watch any anyway. Here is how you could make sure not so spoil anyone else's too.

Spoiler tags!

A staple of every forum, spoiler tags let you hide long, boring or otherwise mildly unpleasant content behind a simple button. A great idea that has a simple implementation.

Lets see how its done:

  1. Although simple, I opted to use jQuery here, and I recommend you include it.
  2. First things first: create your spoiler. Its a simple nested div, with a couple classes:


    Hint: the display: none; property makes sure your text is invisible when your page loads.
  3. Next, the JavaScript. Luckily its really simple:


    Hint: if you are not a fan of the spoiler content slowly crawling out from under the button, replace .slideToggle(); with .toggle(); for an instant effect.

And that is it! You could even add some CSS to make it look nice, although JS controls visibility here, so its not required.

Now you have yet another method to split your site into sections and accomodate longer content without abusing the scrollbar. There are lots of creative ways to allocate space on a website and I'll try to explore as many as I can.

I hope this article was of use! If you found any errors or want any help, please let me know!