Hello friends, today in this video tutorial you will learn how to make an accordion menu using JavaScript HTML and CSS. In the earlier video tutorial we learn How to create a tabs using only HTML and CSS.
So Here is the code and my work. I hope you are gonna love this and share whit your friends too. So let's Start learning Accordion Menu using HTML CSS and JavaScript | Accordion Menu using HTML CSS and JavaScript - html css from scratch. So Let's start..
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel. Thank you..
How To Create a Accordion Menu using only HTML and CSS | Make Accordion Menu in HTML and CSS Design Learn how to Make Accordion Menu using HTML CSS - Create Accordion Menu design using HTML and CSS.
In this tutorial you will learn to create a Accordion Menu using HTML and CSS JavaScript coding, subscribe E-CODEC channel to watch more videos on website designing tutorials for beginners.
STEP 1: Open any code editor
STEP 2: Create a index.html file with html extension
Create a new file index.html, Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How To Make an Accordion Menu Using JavaScript HTML and CSS</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="mainBox">
<div class="accordion">
<div class="label">Learn HTML</div>
<div class="content">
<h1>HTML</h1>
<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, nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion">
<div class="label">Learn CSS</div>
<div class="content">
<h1>CSS</h1>
<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, nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="accordion">
<div class="label">Learn JavaScript</div>
<div class="content">
<h1>JavaScript</h1>
<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, nquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<script type="text/javascript">
let accordion = document.getElementsByClassName('accordion');
for (var i = 0; i < accordion.length; i++) {
accordion[i].addEventListener('click',function(){
this.classList.toggle('active');
})
}
</script>
</body>
</html>
STEP 3: Create a style.css file with CSS extension
Create a new file style.css, Here is the code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.mainBox{
max-width: 500px;
}
.label{
display: block;
background: red;
padding: 12px;
color: #fff;
font-size: 1.2em;
position: relative;
border: 2px solid #fff;
cursor: pointer;
}
.label::after{
content: "+";
position: absolute;
top: 25%;
right: 10px;
font-size: 1.2em;
color: #fff;
}
.content{
height: 0;
overflow: hidden;
transition: .5s;
}
.accordion.active .content{
height: 180px;
padding: 10px;
}
.accordion.active .label::after{
content: "-";
}
I hope you enjoyed this video tutorial. If you had any doubts, then please comment them below. And if you enjoyed this tutorial, then please hit the like button below and subscribe my channel on YouTube. Thank you..
You can also learn:- Learn how to make a tab slider using HTML CSS and JavaScript
0 Comments