【Sample】Accordion for smartphone only by CSS size variableness

Demo1

 Enter to Demo


HTML

<!--[if lt IE 9]>
<style>
.sample-accordion .ac-cont,
.sample-accordion2 .ac2-cont {
	height: auto;
}
</style>
<![endif]-->
<div class="sample-accordion">
<div class="ac-content">
<label for="ac-cap1">1</label>
<input id="ac-cap1" type="checkbox">
<div class="ac-cont">
<p>Content1</p>
</div>
<label for="ac-cap2">2</label>
<input id="ac-cap2" type="checkbox">
<div class="ac-cont">
<p>Content2</p>
<p>Content2</p>
</div>
<label for="ac-cap3">3</label>
<input id="ac-cap3" type="checkbox">
<div class="ac-cont">
<p>Content3</p>
<p>Content3</p>
<p>Content3</p>
</div>
<label for="ac-cap4">4</label>
<input id="ac-cap4" type="checkbox">
<div class="ac-cont">
<p>Content4</p>
<p>Content4</p>
<p>Content4</p>
<p>Content4</p>
</div>
<label for="ac-cap5">5</label>
<input id="ac-cap5" type="checkbox">
<div class="ac-cont">
<p>Content5</p>
<p>Content5</p>
<p>Content5</p>
<p>Content5</p>
<p>Content5</p>
</div>
<!--ac-content--></div>
<!--sample-accordion--></div>
CSS

.sample-demo .sample-accordion {
	min-width: 300px;
	margin: 0 auto;
	padding: 10px;
}
.sample-demo .sample-accordion .ac-content {
	margin: 0 10px;
}
.sample-demo .sample-accordion input {
	display: none;
}
.sample-demo .sample-accordion label {
	display: block;
	background: #9fb7d4;
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
}
.sample-demo .sample-accordion label:hover {
	background: #ccc;
}
.sample-demo .sample-accordion .ac-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #ddd;
	padding: 0 10px;
}
.sample-demo .sample-accordion input:checked + .ac-cont {
	height: auto;
	padding: 10px;
}

Demo2

 Enter to Demo


HTML

<!--[if lt IE 9]>
<style>
.sample-accordion .ac-cont,
.sample-accordion2 .ac2-cont {
	height: auto;
}
</style>
<![endif]-->
<div class="sample-accordion2">
<div class="ac-content">
<label for="ac2-cap1">1</label>
<input id="ac2-cap1" type="radio" name="ac2" checked>
<div class="ac2-cont">
<p>Contents1</p>
</div>
<label for="ac2-cap2">2</label>
<input id="ac2-cap2" type="radio" name="ac2">
<div class="ac2-cont">
<p>Contents2</p>
<p>Contents2</p>
</div>
<label for="ac2-cap3">3</label>
<input id="ac2-cap3" type="radio" name="ac2">
<div class="ac2-cont">
<p>Contents3</p>
<p>Contents3</p>
<p>Contents3</p>
</div>
<label for="ac2-cap4">4</label>
<input id="ac2-cap4" type="radio" name="ac2">
<div class="ac2-cont">
<p>Contents4</p>
<p>Contents4</p>
<p>Contents4</p>
<p>Contents4</p>
</div>
<label for="ac2-cap5">5</label>
<input id="ac2-cap5" type="radio" name="ac2">
<div class="ac2-cont">
<p>Contents5</p>
<p>Contents5</p>
<p>Contents5</p>
<p>Contents5</p>
<p>Contents5</p>
</div>
<!--ac-content--></div>
<!--sample-accordion2--></div>
CSS

#wrapper pre code {
	font-size: 12px;
	font-weight: normal;

}
.sample-demo .sample-accordion2 {
	min-width: 300px;
	margin: 0 auto;
	padding: 10px;
}
.sample-demo .sample-accordion2 .ac-content {
	margin: 0 10px;
}
.sample-demo .sample-accordion2 label {
	display: block;
	background: #9fb7d4;
	cursor: pointer;
	padding: 10px;
	border-bottom: 1px solid #fff;
}
.sample-demo .sample-accordion2 label:hover {
	background: #ccc;
}
.sample-demo .sample-accordion2 input {
	display: none;
}
.sample-demo .sample-accordion2 .ac2-cont {
	transition: 0.2s;
	height: 0;
	overflow: hidden;
	background: #ddd;
	padding: 0 10px;
}
.sample-demo .sample-accordion2 input:checked + .ac2-cont {
	height: auto;
	padding: 10px;
}
Back to the previous page