Spoiler

by Roman

HTML

<div class="spoiler">
  <div class="spoiler-toggle">Spoiler!</div>
  <div class="spoiler-text">
    <p>The buttler is the killer! He did it!</p>
  </div>
</div>

CSS

.spoiler {
  border: 1px solid #ff0000;
  background-color: #f5f5f5;;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.spoiler-toggle {
  font-weight: bold;
  cursor: default;
  padding: 5px;
  font-size: 12px;
  color: #ff0000;
}
.spoiler-text {
  padding: 5px;
}

JavaScript

$(function(){
    $('.spoiler-text').hide();
    $('.spoiler-toggle').click(function(){
        $(this).next().toggle();
    }); // end spoiler-toggle
}); // end document ready