Acordion

by grant

HTML

<div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">What are u watin for, click me!</h3>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta tempore ipsum, delectus quasi est molestiae, autem saepe natus tenetur pariatur explicabo beatae nisi reiciendis amet rerum quod voluptatibus eius vel.
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">Click dirty on me!</h3>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta tempore ipsum, delectus quasi est molestiae, autem saepe natus tenetur pariatur explicabo beatae nisi reiciendis amet rerum quod voluptatibus eius vel.
	</div>
</div>
<div class="panel panel-success">
	<div class="panel-heading">
		<h3 class="panel-title">naughty naughty...</h3>
	</div>
	<div class="panel-body">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta tempore ipsum, delectus quasi est molestiae, autem saepe natus tenetur pariatur explicabo beatae nisi reiciendis amet rerum quod voluptatibus eius vel.
	</div>
</div>

CSS

.panel-body {
	display: none;
  padding: 10px;
}
.panel {
  cursor: pointer;
  width: 50%;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}
.panel-heading {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid grey;
}

JavaScript

jQuery(document).ready(function($){
  //you can now use $ as your jQuery object.
  $(".panel-heading").click(function() {
    $(this).parent().addClass('active').find('.panel-body').slideToggle('fast');
    $(".panel-heading").not(this).parent().removeClass('active').find('.panel-body').slideUp('fast');
  });
});