<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="thread-panel"> <div class="thread-heading"> <h3>Click to here collapse</h3> </div> <div class="thread-body collapse"> Grab us a milk bar no dramas he hasn't got a bitzer. Flat out like a frog in a sock when built like a pash. Gutful of divvy van where gutful of lizard drinking. Stands out like a bloody oath! when trent from punchy fair dinkum. As cross as a turps bloody she'll be right troppo. </div> </div> </div> </div>

.container { max-width: 1140px; } h3 { margin: 0; pading0: 0; } .thread-panel { background-color: #eee; padding: 10px; margin-top: 20px; cursor: pointer; } .thread-panel:hover { background-color: #ccc; color: #eee; } .thread-body { display: none; }

$('.thread-panel').click(function() { $('.thread-body', this).toggle(); });