duongphuhiep/tabs2-reponsive.html

## tabs2-reponsive.html
<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
		<style type="text/css" media="screen">
		* {
			box-sizing: border-box;
		}
		input {
			display: none;
		}
		.tab {
			float: left;
			display: block;
			width: 50%;
		}
		.tab-title {
			display: none;
		}
		@media only screen and (max-width: 1024px) {
			.tab-title {
				display: block;
				position:relative; /*for #require 1*/
				cursor: pointer;
				float: left;
				background: #ccc;
				border: 1px solid #888;
				border-left: 0;
				border-bottom: 0;
				white-space: nowrap;
				width: 50%;
			}
			.tab-link {
				overflow: hidden;
				text-align: center;
				margin:10px;
			}
			.tab-title:hover {
				background: #eee;
			}
			.tab-title:nth-of-type(1) {
				border-left: 1px solid #888;
			}
			.tab {
				clear: both;
				background: #ddd;
				display: none;
				border: 1px solid #888;
			}
			#tab-B:checked ~ label:nth-of-type(2),
			#tab-B:not(:checked) ~ label:nth-of-type(1) {
				background: #ddd;
			}
			#tab-B:checked ~ label:nth-of-type(2):after,
			#tab-B:not(:checked) ~ label:nth-of-type(1):after {
				position: absolute;
				width:100%; /*#require 1: only work if parent position must be different static*/
				content: "";
				height:1px;
				background: #ddd;
			}
			input:nth-of-type(2):not(:checked) ~ .tab:nth-of-type(1),
			input:nth-of-type(2):checked ~ .tab:nth-of-type(2)
			{
				display: block;
				width: 100%;
			}
		}
		</style>
	</head>
	<body>
		<div>
			<input checked type="radio" name="tab" id="tab-A" />
			<input type="radio" name="tab" id="tab-B" />
			<label class="tab-title" for="tab-A"><div class="tab-link">Tab 1: Lorem</div></label>
			<label class="tab-title" for="tab-B"><div class="tab-link">Tab 2: Lorem ipsum Fugiat occaecat dolor voluptate esse</div></label>
			<div class="tab">
				<h3>I love :checked. :checked is great. If only I could toggle any item and not just input elements we'd be golden.</h3>
			</div>
			<div class="tab">
				<h3>Tab 2</h3>
				<p>Lorem Ipsum Dolor Sit</p>
			</div>
		</div>
	</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
	<style type="text/css" media="screen">
	* {
	box-sizing: border-box;
	}
	input {
	display: none;
	}
	.tab {
	float: left;
	display: block;
	width: 50%;
	}
	.tab-title {
	display: none;
	}
	@media only screen and (max-width: 1024px) {
	.tab-title {
	display: block;
	position:relative; /for #require 1/
	cursor: pointer;
	float: left;
	background: #ccc;
	border: 1px solid #888;
	border-left: 0;
	border-bottom: 0;
	white-space: nowrap;
	width: 50%;
	}
	.tab-link {
	overflow: hidden;
	text-align: center;
	margin:10px;
	}
	.tab-title:hover {
	background: #eee;
	}
	.tab-title:nth-of-type(1) {
	border-left: 1px solid #888;
	}
	.tab {
	clear: both;
	background: #ddd;
	display: none;
	border: 1px solid #888;
	}
	#tab-B:checked ~ label:nth-of-type(2),
	#tab-B:not(:checked) ~ label:nth-of-type(1) {
	background: #ddd;
	}
	#tab-B:checked ~ label:nth-of-type(2):after,
	#tab-B:not(:checked) ~ label:nth-of-type(1):after {
	position: absolute;
	width:100%; /#require 1: only work if parent position must be different static/
	content: "";
	height:1px;
	background: #ddd;
	}
	input:nth-of-type(2):not(:checked) ~ .tab:nth-of-type(1),
	input:nth-of-type(2):checked ~ .tab:nth-of-type(2)
	{
	display: block;
	width: 100%;
	}
	}
	</style>
	</head>
	<body>
	<div>
	<input checked type="radio" name="tab" id="tab-A" />
	<input type="radio" name="tab" id="tab-B" />
	<label class="tab-title" for="tab-A"><div class="tab-link">Tab 1: Lorem</div></label>
	<label class="tab-title" for="tab-B"><div class="tab-link">Tab 2: Lorem ipsum Fugiat occaecat dolor voluptate esse</div></label>
	<div class="tab">
	<h3>I love :checked. :checked is great. If only I could toggle any item and not just input elements we'd be golden.</h3>
	</div>
	<div class="tab">
	<h3>Tab 2</h3>
	<p>Lorem Ipsum Dolor Sit</p>
	</div>
	</div>
	</body>
	</html>