<div class="container">
	<div class="acd">
		<dl class="acd_menu">
			<dt class="acd_menu_head">About</dt>
			<dd class="acd_menu_body">
				<p>About About About About About About About About About About About About About About About About About About About About About About About About About About About About</p>
			</dd>
		</dl>
		<dl class="acd_menu">
			<dt class="acd_menu_head">Works</dt>
			<dd class="acd_menu_body">
				<p>Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works Works</p>
			</dd>
		</dl>
		<dl class="acd_menu">
			<dt class="acd_menu_head">Contact</dt>
			<dd class="acd_menu_body">
				<p>Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact</p>
			</dd>
		</dl>
	</div>
</div>
body {
	font-size: 14px;
	line-height: 1.5;
	color: #333;
}
a {
	text-decoration: none;
	color: #333;
}
img {
	vertical-align: bottom;
}
.clearfix {
	display: table;
	clear: both;
}
.container {
	width: 400px;
	margin: 0 auto;
	padding: 50px 0;
	background: #fff;
}
.acd_menu {
	border-width: 1px 0 1px;
	border-style: solid;
	border-color: #aaa;
	box-sizing: border-box;
	overflow: hidden;

	&_head {
		padding: 10px;
		background: #aaa;
		border-bottom: 1px solid #fff;
		color: #fff;
		cursor: pointer;
		box-sizing: border-box;
	}

	&_body {
		height: 0;
		padding: 0 20px;
		border: 1px solid #aaa;
		border-width: 0 1px;
		box-sizing: border-box;
		overflow: hidden;
		p {
			margin: 10px 0;
		}
	}
}
.acd_menu:last-child {
	.acd_menu_head {
		border-bottom: none;
	}
}
(function() {
	'use strict';
	
	var acdHeads;
	
	// マッチしたclass名を持つ要素を取得
	acdHeads = document.querySelectorAll('.acd_menu_head');
	
	for (var i = 0; i < acdHeads.length; i++) {
		acdHeads[i].addEventListener('click', function() {
			
			var acdBody;
			
			// 同じ親要素を持つ隣接した次の要素を取得
			// <div class="acd_menu_body"></div>
			acdBody = this.nextElementSibling;
			acdBody.style.transition = 'height 0.2s ease-out';
			
			if (acdBody.style.height) {
				acdBody.style.height = null;
			} else {
				// scrollHeightプロパティはpaddingを含む表示されていない要素の高さを取得
				acdBody.style.height = acdBody.scrollHeight + 'px';
			}
		});
	}
}());

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.