Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<table>
	<tr>
		<th class="scrollOption_parent">タイトル<span class="scrollOption">全表示</span></th>
		<td>
			<div class="smartCell">
			<?php for($i = 0; $i < 100; $i++): ?>
				<span>あいうえお<?= $i; ?></span>
			<?php endfor; ?>
		</div>
		</td>
	</tr>
	<tr>
		<th class="scrollOption_parent">タイトル<span class="scrollOption">全表示</span></th>
		<td>
			<div class="smartCell">
			<?php for($i = 0; $i < 100; $i++): ?>
				<span>あいうえお<?= $i; ?></span>
			<?php endfor; ?>
		</div>
		</td>
	</tr>
</table>
<script>
;(function() {
	window.addEventListener('DOMContentLoaded', function() {
		smartCell('scrollOption', 'smartCell');
		console.log(getCookieVal('scrollOptionDisplay_1'));

	}, false);

	function smartCell(triger, target) {
		console.dir(document.cookie);
		var scrollOptions = document.getElementsByClassName(triger),
				smartCells = document.getElementsByClassName(target);
		for(var i = 0, l = scrollOptions.length; i < l; i++) {
			(function(j) {
				scrollOptions[j].addEventListener('click', function() {
					smartCells[j].classList.toggle('smartCellToggle');
					if(this.innerText === '省表示') {
						this.innerText = '全表示';
						document.cookie = 'scrollOptionDisplay_' + j + '=short';
					} else {
						this.innerText = '省表示';
						document.cookie = 'scrollOptionDisplay_' + j + '=wide';
					}
				}, false);
			})(i);
		}

		var optionCookie = getCookieVal('scrollOptionDisplay_0'),
				campaignCookie = getCookieVal('scrollOptionDisplay_1');
		if(optionCookie === 'wide') {
			smartCells[0].classList.toggle('smartCellToggle');
			scrollOptions[0].innerText = '省表示';
		}
		if(campaignCookie === 'wide') {
			smartCells[1].classList.toggle('smartCellToggle');
			scrollOptions[1].innerText = '省表示';
		}
	}

	function getCookieVal(name) {
		var result = null,
				cookieName = name + '=',
				allcookies = document.cookie,
				position = allcookies.indexOf(cookieName);
		if(position != -1) {
			var startIndex = position + cookieName.length,
					endIndex = allcookies.indexOf( ';', startIndex);
			if(endIndex == -1) {
				endIndex = allcookies.length;
			}
			result = decodeURIComponent(allcookies.substring(startIndex, endIndex));
		}
		return result;
	}

})();
</script>
<style>
table {
	border-collapse: collapse;
}
th {
	width: 4em;
}
td,
th {
	border: 1px solid #ccc;
}
.smartCell {
	height: 200px;
	overflow-y: scroll;
}
.scrollOption_parent {
	position: relative;
}
.scrollOption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0 auto;
	cursor: pointer;
}
.smartCellToggle {
	height: initial;
	overflow-y: initial;
}
</style>
</body>
</html>