<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="spoiler"> <div class="spoiler-toggle"><span class="glyphicon glyphicon-plus"></span> Spoiler!</div> <div class="spoiler-text"> <p>The butler is the killer!</p> <p>He did it!</p> </div> </div> </div> </div>

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

$(function(){ $('.spoiler-text').hide(); $('.spoiler-toggle').click(function(){ $(this).next().animate({height: 'toggle'}); if ($(this).html() == '<span class="glyphicon glyphicon-plus"></span> Spoiler!'){ $(this).html('<span class="glyphicon glyphicon-minus"></span> Spoiler!'); } else{ $(this).html('<span class="glyphicon glyphicon-plus"></span> Spoiler!'); } }); // end spoiler-toggle }); // end document ready