Accordion using css only

accordion using css only

HTML Code

Hi, In this tutorial you will learn to create Accordion Using HTML and CSS Only. Alternative Titles How to create accordions. How to create accordion using only CSS. How to create accordion in HTML and CSS. Accordions using CSS only.

Below is HTML file Code.

<body>
	<div id="faq">
		<h1>FAQ</h1>
		<ul>
			<li>
				<input type="checkbox" checked>
				<i></i>
				<h2>What is HTML</h2>
				<p>HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML describes the structure of a Web page. HTML consists of a series of elements. HTML elements tell the browser how to display the content.</p>
			</li>
			<li>
				<input type="checkbox" checked>
				<i></i>
				<h2>What is CSS</h2>
				<p>CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at once. External stylesheets are stored in CSS files.</p>
			</li>
			<li>
				<input type="checkbox" checked>
				<i></i>
				<h2>What is JavaScript</h2>
				<p>JavaScript is the Programming Language for the Web. JavaScript can update and change both HTML and CSS. JavaScript can calculate, manipulate and validate data.p>
			</li>
		</ul>
	</div>
</body> 

CSS Code

Create a .css file and link it with .html 

Below is CSS file Code. 

body {
	display: flex;
	background: #f4f4f4;
}
#faq {
	max-width: 600px;
	margin: auto;
	padding: 0 15px;
	text-align: center;
}
#faq ul {
	text-align: left;
}
#faq h1 {
	color: #f05454;
	margin-bottom: 30px;
}
#faq h2 {
	color: #f05454;
	font-family: 'hm_light', sans-serif;
	font-size: 20px;
	text-align: left;
	line-height: 34px;
	padding: 15px 15px 0;
	text-transform: none;
	letter-spacing: 1px;
	font-weight: 600;
	display: block;
	margin:0;
	cursor: pointer;
	transition: .2s;
}
#faq p {
	color: #fff;
	text-align: left;
	font-family: 'hm_light', sans-serif;
	font-size: 14px;
	line-height: 1.45;
	position: relative;
	overflow: hidden;
	max-height: 250px;
	will-change: max-height;
	contain:layout;
	display: inline-block;
	opacity: 1;
	transform: translate(0,0);
	margin: 5px 50px 0 15px;
	transition: .3s opacity, .6s max-height;
	hyphens: auto;
	-webkit-hyphens:auto;
	-ms-hyphens:auto;
	z-index: 2;
}
#faq ul {
	list-style: none;
	perspective: 900;
	padding: 0;
	margin:0;
}
#faq ul li {
	position: relative;
	overflow: hidden;
	padding: 0;
	margin: 0;
	background: #30475e;
	box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
	-webkit-tap-highlight-color: transparent;
	border-radius: 4px;
}
#faq ul li + li {
	margin-top: 15px;
}
#faq ul li:last-of-type {
	padding-bottom: 0;
}
#faq ul li i {
	position: absolute;
	transform: translate(-6px, 0);
	margin-top: 28px;
	right: 15px;
}
#faq ul li i:before,
#faq ul li i:after {
	content: "";
	position: absolute;
	background-color: #f05454;
	width: 3px;
	height: 9px;
}
#faq ul li i:before {
	transform: translate(2px, 0) rotate(45deg);
}
#faq ul li i:after {
	transform: translate(-2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
	position: absolute;
	cursor: pointer;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
	color: #fff;
}
#faq ul li input[type=checkbox]:checked ~ p {
	margin: 0;
	max-height: 0;
	transition: .3s;
	opacity: 0;
}
#faq ul li input[type=checkbox]:checked ~ i:before {
	transform: translate(2px, 0) rotate(45deg);
	background: #fff;
}
#faq ul li input[type=checkbox]:checked ~ i:after {
	transform: translate(-2px, 0) rotate(-45deg);
	background: #fff;
}
.transition, p, ul li i:before, ul li i:after {
	transition: all 0.3s;
} 

Watch Below Video for Detail Understanding

Leave a Reply

Your email address will not be published. Required fields are marked *