Create Simple Accordion Menu Using Only HTML and CSS

Today in this blog you’ll learn how to create Simple Accordion Menu Using Only HTML and CSS. We used HTML and CSS to create this simple accordion.

Create an Accordion Menu using HTML and CSS[Source Codes]

This source code can help you to create an Accordion Menu using HTML and CSS.

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="acc_box">
		<input checked type="radio" name="tabs" id="tabs1">
		<label class="acc_trigger" for="tabs1">CSS Animation Effects</label>
		<div class="acc_content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
	<div class="acc_box">
		<input type="radio" name="tabs" id="tabs2">
		<label class="acc_trigger" for="tabs2">JavaScript 3D Animation Effects</label>
		<div class="acc_content">
			<p>Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. </p>
		</div>
	</div>
	<div class="acc_box">
		<input type="radio" name="tabs" id="tabs3">
		<label class="acc_trigger" for="tabs3">JavaScript Web Application</label>
		<div class="acc_content">
			<p> Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur.</p>
		</div>
	</div>
	<div class="acc_box">
		<input type="radio" name="tabs" id="tabs4">
		<label class="acc_trigger" for="tabs4">CSS 3D Animation Effects</label>
		<div class="acc_content">
			<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
			cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
			proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			consequat. </p>
		</div>
	</div>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 18px;
	line-height: 1.5;
	margin: 0;
	background: #003046;
	color: #fff;

	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.container{
	width: 800px;
}
.acc_box{
	position: relative;
	margin-bottom: 10px;
}
.acc_box input{
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
}
.acc_box label{
  background: #fff;
  color: #003046;
  display: block;
  padding: 8px 15px;
  font-weight: 700;
  font-size: 18px;
  position: relative;
  cursor: pointer;
}

.acc_box label:after{
	position: absolute;
	content: "";
	right: 9px;
  top: 17px;
	border-top: 8px solid #003046;
	border-right: 6px solid transparent;
	border-left: 6px solid transparent;
}
.acc_content{
	display: none;
	border:2px solid #009dd9;
	padding: 5px 15px;
}
.acc_box input:checked + label{
  background: #009dd9;
  color: #fff;
}
.acc_box input:checked + label:after{
	border-top: 0;
	border-bottom: 8px solid #fff;
}

.acc_box input:checked + label + .acc_content{
	display: block;
}