Today In this article you will learn how to create a simple Accordion Menu using HTML CSS and JavaScript only. This type of Accordion Menu is used on the websites for some basic questions and their answer section that the user asks.
You easily create Accordion Menu Using HTML CSS and javascript then this article will definitely help you. For this, you need to have an idea about basic HTML CSS, and javascript then you can understand the following codes. It is designed in a completely modern way.
Some information about this JavaScript Accordion Menu
Earlier I designed a faq where I used only HTML and CSS. I made it fully responsive so you can use it on any device. As you can see in the picture above, five menu items or questions have been used here. There is a lot more text under that heading that is hidden. Whenever you click on that heading or menu item, you will see all the tests in that item. When you click on it again, it will be hidden again.
Watch the video tutorial to create Javascript Accordion Menu
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this JavaScript Accordion Menu step by step completely beautifully. So you can learn how to make these Javascript Accordion Menu. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this JavaScript Accordion Menu Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Animated Profile Card Design Using HTML CSS and Javascript
- Complete JavaScript Form Validation
- E-commerce Product Card UI Design Using HTML & CSS
JavaScript Accordion Menu | Source Codes
You have to create HTML, CSS & JS File For this menu. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion Menu</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-item-header">
Accordion Menu Using HTML
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa excepturi incidunt dicta quasi porro, magnam aliquid, itaque rerum quos repellendus sapiente nemo culpa molestias officiis?
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Accordion Using Pure CSS
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat repellat maiores veritatis et, dicta necessitatibus quas illo commodi libero!<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae sequi a fugit totam tempore, aspernatur.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Accordion Menu using Javascript
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus alias dolorum itaque incidunt amet animi explicabo facilis, voluptates, maxime repudiandae minus at, voluptatibus optio facere in obcaecati exercitationem, ab quod.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Accordion Bar With Jquery
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam error alias, incidunt dolor aperiam soluta aspernatur tenetur eaque, iusto consequuntur sit nam labore id suscipit. Soluta quos, molestias cum ab laborum odit quaerat quibusdam.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-item-header">
Accordion Bar using Bootstrap 5
</div>
<div class="accordion-item-body">
<div class="accordion-item-body-content">
CORS, aka Cross-Origin Resource Sharing, is a mechanism that enables many resources (e.g. images, stylesheets, scripts, fonts) on a web page to be requested from another domain outside the domain from which the resource originated.
</div>
</div>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #0f5086;
color: #fff;
margin-top: 100px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.3rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
font-size: 17px;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
font-family: sans-serif;
border-top: 1px solid;
font-size: 16px;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
@media(max-width:767px) {
html {
font-size: 14px;
}
}third Step, you have to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.
JS Code:
const accordionItemHeaders = document.querySelectorAll(".accordion-item-header");
accordionItemHeaders.forEach(accordionItemHeader => {
accordionItemHeader.addEventListener("click", event => {
accordionItemHeader.classList.toggle("active");
const accordionItemBody = accordionItemHeader.nextElementSibling;
if(accordionItemHeader.classList.contains("active")) {
accordionItemBody.style.maxHeight = accordionItemBody.scrollHeight + "px";
}
else {
accordionItemBody.style.maxHeight = 0;
}
});
});
now you’ve successfully created this Accordion Menu Tutorial using HTML, CSS, and Javascript. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
