scrubmx/accordion.js

## accordion.js
// Accordion - Container
var $listContainer = $('dl.description-list');

$listContainer.on('click', 'dt:not(.active)', function(){
	$listContainer.find('dt.active').removeClass('active');
	$listContainer.find('dd').slideUp();
	$(this).addClass('active').next('dd').slideDown();
});

$listContainer.on('click', 'dt.active', function(){
	$(this).removeClass('active').next('dd').slideUp();
});

## index.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Simple jQuery Accordion</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-10 col-sm-offset-1">

					<dl class="description-list">
						<dt class="active">Description lists</dt>
						<dd>A description list is perfect for defining terms.</dd>
						<dt>Euismod</dt>
						<dd>Donec id elit non mi porta gravida at eget metus.</dd>
						<dt>Malesuada porta</dt>
						<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
					</dl>

				</div><!-- col-sm-10 -->
			</div><!-- row -->
		</div><!-- container -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="js/accordion.js"></script>
	</body>
</html>

## style.css
dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt {
  font-weight: 700;
  font-size: 16px;
  background-color: grey;
  color: white;
  padding-left: 10px;
}
dd {
  margin-left: 0;
  line-height: 1.4;
  padding: 5px 10px;
}
	// Accordion - Container
	var $listContainer = $('dl.description-list');

	$listContainer.on('click', 'dt:not(.active)', function(){
	$listContainer.find('dt.active').removeClass('active');
	$listContainer.find('dd').slideUp();
	$(this).addClass('active').next('dd').slideDown();
	});

	$listContainer.on('click', 'dt.active', function(){
	$(this).removeClass('active').next('dd').slideUp();
	});
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Simple jQuery Accordion</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-sm-10 col-sm-offset-1">

	<dl class="description-list">
	<dt class="active">Description lists</dt>
	<dd>A description list is perfect for defining terms.</dd>
	<dt>Euismod</dt>
	<dd>Donec id elit non mi porta gravida at eget metus.</dd>
	<dt>Malesuada porta</dt>
	<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
	</dl>

	</div><!-- col-sm-10 -->
	</div><!-- row -->
	</div><!-- container -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="js/accordion.js"></script>
	</body>
	</html>
	dl {
	margin-top: 0;
	margin-bottom: 20px;
	}
	dt {
	font-weight: 700;
	font-size: 16px;
	background-color: grey;
	color: white;
	padding-left: 10px;
	}
	dd {
	margin-left: 0;
	line-height: 1.4;
	padding: 5px 10px;
	}