slideDown drawer module (html, scss, jquery)

drawer

// TODO: add keyboard listeners and aria attributes (expanded, haspopup)

/////////////////////////
////// HTML
///////////////

<div class="drawer trigger-drawer-open is-drawer-closed">
	<div class="drawer-hd">
        <span class="pull-left" data-target="drawer-bd"><span class="icon--arrow--closed"></span></span>
		<h3 class="drawer-title">Drawer header indicates drawer-bd content</h3>
	</div>

	<div class="drawer-bd">
		<p>Drawer body opens/closes.</p>
		<p>Optional .icon--arrow--opened and --closed on .trigger-drawer in .drawer-hd</p>
	</div>
</div>


/////////////////////////
////// SCSS (some compass)
///////////////

.drawer { 
	position: relative;
	clear: both;
	border: $drawer-border-width $drawer-border-style $drawer-border-color;
	margin-bottom: 1.5em;
	background-color: $drawer-bg;
	color: $drawer-color;
	text-align: left;
	@include old-ie {
		zoom: 1;
	}
}

.drawer-hd {
	@extend %clearfix;
	padding: .5em 1em;
	cursor: pointer;
	background-color: $drawer-hd-bg;
	color: $drawer-hd-color;
	border-bottom: $drawer-border-width $drawer-border-style $drawer-border-color;
	.drawer-title {
		margin-bottom: 0;
		overflow: hidden;
	}
	.is-drawer-closed & {
		border-bottom: 0;
	}
}

.drawer-bd { 
	padding: .5em 1.5em;
}
.is-drawer-closed .drawer-bd {
	filter: alpha(opacity=0);
	display: none;
}

/////////////////////////
////// jQuery
///////////////

(function () {

	var dwrs = $(".drawer");

	dwrs.each(function (i) {

		var dwr = $(this),
			hd = dwr.find(".drawer-hd"),
			bd = dwr.find(".drawer-bd");

		hd.on("click", function (e) {

			if (bd.is(":visible")) {
				bd.fadeTo(200, 0.00, function () {
					bd.slideUp(200, function(){dwr.toggleClass("is-drawer-closed")});
				});
			} else {
				dwr.toggleClass("is-drawer-closed");
				bd.slideDown(200, function () {
					bd.fadeTo(200, 1.00);
				});
			}

		});

	});

})();