Create accordion menu using only HTML and CSS

This tutorial blog to learn how to create Accordion with out JavaScript only use pure CSS.

Video tutorial of Accordion menu using only HTML and CSS

This tutorial video to learn how to create Accordion with out JavaScript only use pure CSS.

Accordion menu using only HTML and CSS [Source Codes]

This source code can help you to create Accordion menu using only HTML and CSS.

You can also download this source code through the given link. Click here to download source code

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">
	<label class="accordion_trigger" for="at1">
		Web Design
	</label>
	<input class="ac_hide" type="radio" id="at1" checked name="x1">
	<div class="accordion_container">
		<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>
	<label class="accordion_trigger" for="at2">
		Web Development
	</label>
	<input class="ac_hide" type="radio" id="at2" name="x1">
	<div class="accordion_container">
		<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>
	<label class="accordion_trigger" for="at3">
		Digital Marketing
	</label>
	<input class="ac_hide" type="radio" id="at3" name="x1">
	<div class="accordion_container">
		<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>



</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: 16px;
	margin: 0;
	background: #079992;
    min-height: 100vh;
}

.container{
	max-width: 800px;
	padding: 50px 0;
    margin: 0 auto;
}
.accordion_trigger{
	display: block;
    padding: 13px 25px;
    background: #044b6b;
    border-bottom: 0;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: block;
    position: relative;
}
.accordion_trigger:after{
	content: "";
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -4px;
	border-top: 8px solid #fff;
	border-right:7px solid transparent;
	border-left:7px solid transparent;
}
.accordion_container{
	transition: all 0.3s ease-in-out;
	height: 0;
	overflow: hidden;
	margin-bottom: 1px;
	border:3px solid #044b6b;
	background:#fff;
}
.accordion_container p{
	margin:20px;
}
.ac_hide{
	opacity: 0;
	position: absolute;
}
.ac_hide:checked + .accordion_container{
	height: 150px;
}

Create accordion menu using only HTML and CSS

Video tutorial of Accordion menu using only HTML and CSS

Accordion menu using only HTML and CSS [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery