【Sample】Accordion for smartphone only by CSS size variableness

Demo1

 Enter to Demo


HTML

<!--[if lt IE 9]>
<style>
.sample-accordion3 .ac3-cont {
	display: block;
}
.sample-accordion4 {
	overflow: scroll;
}
.sample-accordion4 .ac4-cont {
	display: block;
}
.sample-accordion5 {
	overflow: scroll;
}
.sample-accordion5 .ac5-cont {
	width: 374px;
	height: 300px;
}
</style>
<![endif]-->
<div class="sample-accordion3">
<div class="ac-content">
<label for="ac3-cap1">1</label>
<input id="ac3-cap1" type="checkbox" checked>
<div class="ac3-cont">
<p>Contents1</p>
</div>
<label for="ac3-cap2">2</label>
<input id="ac3-cap2" type="checkbox">
<div class="ac3-cont">
<p>Contents2</p>
<p>Contents2</p>
</div>
<label for="ac3-cap3">3</label>
<input id="ac3-cap3" type="checkbox">
<div class="ac3-cont">
<p>Contents3</p>
<p>Contents3</p>
<p>Contents3</p>
</div>
<!--ac-content--></div>
<!--sample-accordion3--></div>
CSS

.sample-demo .sample-accordion3 {
	min-width: 300px;
	margin: 0 auto;
}
.sample-demo .sample-accordion3 .ac-content {
	margin: 0 10px;
}
.sample-demo .sample-accordion3 input {
	display: none;
}
.sample-demo .sample-accordion3 label {
	display: block;
	background: #9fb7d4;
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
}
.sample-demo .sample-accordion3 label:hover {
	background: #ccc;
}
.sample-demo .sample-accordion3 .ac3-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #ddd;
	padding: 0 10px;
}
.sample-demo .sample-accordion3 input:checked + .ac3-cont {
	height: auto;
	padding: 10px;
}
@media only screen and (min-width: 768px) {
.sample-demo .sample-accordion3 {
	width: 600px;
	height: 300px;
	margin: 0 auto;
	overflow: hidden;
	background: #9fb7d4;
}
.sample-demo .sample-accordion3 .ac-content {
	margin: 0;
}
.sample-demo .sample-accordion3 input {
	display: none;
}
.sample-demo .sample-accordion3 label {
	float: left;
	width: 20px;
	height: 300px;
	background: #9fb7d4;
	cursor: pointer;
	padding: 10px;
	border-right: 1px solid #fff;
}
.sample-demo .sample-accordion3 label:hover {
	background: #ccc;
}
.sample-demo .sample-accordion3 .ac3-cont {
	float: left;
	width: 138px;
	height: 300px;
	display: none;
	background: #ddd;
	border-right: 1px solid #fff;
}
.sample-demo .sample-accordion3 input:checked + .ac3-cont {
	width: 138px;
	height: 300px;
	padding: 10px;
	display: block;
}
/* ** */}

Demo2

 Enter to Demo


HTML

<!--[if lt IE 9]>
<style>
.sample-accordion3 .ac3-cont {
	display: block;
}
.sample-accordion4 {
	overflow: scroll;
}
.sample-accordion4 .ac4-cont {
	display: block;
}
.sample-accordion5 {
	overflow: scroll;
}
.sample-accordion5 .ac5-cont {
	width: 374px;
	height: 300px;
}
</style>
<![endif]-->

<div class="sample-accordion4">
<div class="ac-content">
<label for="ac4-cap1">1</label>
<input id="ac4-cap1" type="radio" name="ac4" checked>
<div class="ac4-cont">
<p>Contents1</p>
</div>
<label for="ac4-cap2">2</label>
<input id="ac4-cap2" type="radio" name="ac4">
<div class="ac4-cont">
<p>Contents2</p>
<p>Contents2</p>
</div>
<label for="ac4-cap3">3</label>
<input id="ac4-cap3" type="radio" name="ac4">
<div class="ac4-cont">
<p>Contents3</p>
<p>Contents3</p>
<p>Contents3</p>
</div>
<label for="ac4-cap4">4</label>
<input id="ac4-cap4" type="radio" name="ac4">
<div class="ac4-cont">
<p>Contents4</p>
<p>Contents4</p>
<p>Contents4</p>
<p>Contents4</p>
</div>
<label for="ac4-cap5">5</label>
<input id="ac4-cap5" type="radio" name="ac4">
<div class="ac4-cont">
<p>Contents5</p>
<p>Contents5</p>
<p>Contents5</p>
<p>Contents5</p>
<p>Contents5</p>
</div>
<!--ac-content--></div>
<!--sample-accordion4--></div>
CSS

.sample-demo .sample-accordion4 {
	min-width: 300px;
	margin: 0 auto;
}
.sample-demo .sample-accordion4 .ac-content {
	margin: 0 10px;
}
.sample-demo .sample-accordion4 label {
	display: block;
	background: #9fb7d4;
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
}
.sample-demo .sample-accordion4 label:hover {
	background: #ccc;
}
.sample-demo .sample-accordion4 input {
	display: none;
}
.sample-demo .sample-accordion4 .ac4-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #ddd;
	padding: 0 10px;
}
.sample-demo .sample-accordion4 input:checked + .ac4-cont {
	height: auto;
	padding: 10px;
}
@media only screen and (min-width: 768px) {
.sample-demo .sample-accordion4 {
	width: 600px;
	height: 300px;
	margin: 0 auto;
	overflow: hidden;
}
.sample-demo .sample-accordion4 .ac-content {
	margin: 0;
}
.sample-demo .sample-accordion4 input {
	display: none;
}
.sample-demo .sample-accordion4 label {
	float: left;
	width: 20px;
	height: 300px;
	background: #9fb7d4;
	cursor: pointer;
	padding: 10px;
	border-right: 1px solid #fff;
}
.sample-demo .sample-accordion4 label:hover {
	background: #ccc;
}
.sample-demo .sample-accordion4 .ac4-cont {
	float: left;
	width: 374px;
	height: 300px;
	display: none;
	background: #ddd;
	border-right: 1px solid #fff;
}
.sample-demo .sample-accordion4 input:checked + .ac4-cont {
	width: 374px;
	height: 300px;
	padding: 10px;
	display: block;
}
/* ** */}
Back to the previous page