Create Accordion with CSS and HTML without JS

04 / Nov / 2015 by Amit Narayan 1 comments

There are many way to create the accordion effect with js but following are the example of how to create the accordion only with css and html.

Here is the image that show which type of accordion I am going to create.

accordion

Now starts with html code:

In this I have used checkbox to use the functionality of click. But we will not display these input checkboxes. We can use display none to hide the checkbox. Also I am using label for tab1 and tab2 design.

HTML CODE:

<div id="nestle-section">
	<input type="radio" id="tab1" name="tabs" checked=""/>
	<label for="tab1">Tab1</label>
	<div class="tab-content1">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
	</div>

	<input type="radio" id="tab2" name="tabs"/>
	<label for="tab2">Tab2</label>
	<div class="tab-content1">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
	</div>
</div>

Css Code:

Styling of Tab1 and Tab2 label:

#nestle-section{
	float:left; 
	width:300px; 
	position:relative;
}
#nestle-section label{
	float:left; 
	width:100%; 
	background:#333; 
	color:#fff; 
	padding:5px 0; 
	text-align:center; 
	cursor:pointer; 
	border-bottom:1px solid #fff;
}

Styling of accordion content:

#nestle-section .tab-content1{
	float:left; 
	width:280px; 
	padding:0 10px; 
	height:0; 
	-moz-transition: height 1s ease; 
	-webkit-transition: height 1s ease; 
	-o-transition: height 1s ease; 
	transition: height 1s ease; 
	overflow:hidden;
}

Then I give the following style for accordion animation onclick of Tab1 and Tab2 labels:

#nestle-section  input:checked + label + .tab-content1{
	padding: 10px;
	height: 150px;
	-moz-transition: height 1s ease;
	-webkit-transition: height 1s ease;
	-o-transition: height 1s ease;
	transition: height 1s ease;
}
#nestle-section input:checked + label{
	background:#ccc; 
	color:#333;
}

Then we hide the radio:

#nestle-section input{
	display:none;
}
FOUND THIS USEFUL? SHARE IT

comments (1 “Create Accordion with CSS and HTML without JS”)

Leave a comment -