How to Create an Accordion Menu Using HTML, CSS, and JavaScript
Hey coders, in this tutorial we will learn how to Create an Accordion sidebar menu using HTML, CSS, and Javascript.
An accordion is a menu made up of vertically stacked headings that, when activated, expose further information (often by a mouse click). This web design pattern is prominent in responsive design because it focuses only on the most important information in an area while making the rest easily accessible.
The design pattern of the Accordion sidebar menu is great for dividing large or complex information into manageable parts. It’s also great for mobile sites because it decreases the amount of scrolling required.
Let Us Now Start Creating Our Accordion sidebar menu using HTML and CSS. We Will Be Creating 3 Files (HTML File, CSS File, and JS File)
50+ HTML, CSS and JavaScript Projects With Source Code
Live Preview Of Accordion Menu:-
Step 1: Adding basic HTML
Creating A Basic Structure Of the Accordion sidebar menu using HTML ā Hypertext Markup Language.
Here Is The Code For You To Directly Use It. The Code Will Be Explained Below For You To Understand How To Create the Accordion side bar menu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="accs.css">
</head>
<body>
<div class="container">
<button class="accordion">Profile</button>
<div class="accordion-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.</p>
</div>
<button class="accordion">Messages</button>
<div class="accordion-content">
<ul>
<li>Inbox</li>
<li>Sent</li>
<li>Drafts</li>
</ul>
</div>
<button class="accordion">Settings</button>
<div class="accordion-content">
<ul>
<li>Profile</li>
<li>Privacy & Safety</li>
<li>Notifications</li>
</ul>
</div>
<button class="accordion">Log out</button>
</div>
<script src="accsidemenu.js"></script>
</body>
</html>Let us understand the HTML code:-
- Inside the head section of our html document we will link the CSS Stylesheet using the link tag.
- Now inside the body of the document, create a division using a div tag with class=ācontainerā.
- Inside the div, start by creating the button for all the sections you want in your accordion side bar. Here in this project we will create 4 buttons – Profile, Messages, Settings and Log out. This accordian bar can be used for many types of websites which requires the user to create a profile and then access it by logging in to their account.
- For each of the buttons created, we will have different functionalities to it.
- For the profile button, you can add your personalized profile details, for Messages we will have an Inbox, Sent and Drafts.
- For Settings button, we will have Profile, Privacy & Safety, Notifications. And the last button to log out of your profile.
- At last we will link the Javascript file using the script tag.
Create Portfolio Website Using HTML and CSS (Source Code)
Output with Only Html Code:-
Step 2: Giving styling using CSS
Here is the code, you can copy it to directly use it in your IDE for this project.
@import url("https://fonts.googleapis.com/css2?family=Ubuntu&display=swap");
html,
body {
margin: 0;
width: 100%;
height: 100%;
background: rgb(192, 48, 77);
background: linear-gradient(
174deg,
rgba(192, 48, 77, 1) 0%,
rgba(158, 37, 61, 1) 100%
);
font-family: "Ubuntu", sans-serif;
}
.container {
width: 100%;
max-width: 25rem;
padding: 2rem;
margin: 3rem auto;
background: hsl(0, 0%, 14%);
border-radius: 1rem;
border: 1px solid #222;
box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.55);
}
.accordion {
background-color: #333;
color: #eee;
cursor: pointer;
padding: 1rem;
width: 100%;
border: 1px solid #222;
text-align: left;
outline: none;
font-size: 1rem;
transition: all 0.4s ease-out;
box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.75);
}
.accordion:first-child {
border-radius: 1rem 1rem 0 0;
}
.accordion:nth-last-child(1) {
border-radius: 0 0 1rem 1rem;
}
.accordion:nth-last-child(1):hover {
background: crimson;
}
.active,
.accordion:hover {
background-color: #426ef0;
}
.accordion:after {
content: "\002B";
color: #eee;
font-weight: bold;
float: right;
margin-left: 0.5rem;
}
.active:after {
content: "\2212";
}
.accordion-content {
padding: 0 1rem;
background-color: #222;
color: #aaa;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-content ul {
list-style-type: circle;
margin: 1rem 0;
padding: 0.2rem;
}
.accordion-content ul li {
padding: 0.2rem 0;
}
Let us understand the CSS code:-
- Ā Starting by importing the font from google using @import url() and the following link – https://fonts.googleapis.com/css2?family=Ubuntu&display=swap
- For styling the html body we will use the following attributes with the values to get the desired styling – margin: 0; width: 100%; height: 100%; background: rgb(192, 48, 77); background: linear-gradient(174deg, rgba(192, 48, 77, 1) 0%, rgba(158, 37, 61, 1) 100%); font-family: “Ubuntu”, sans-serif;
- Now we will target html elements with class=ācontainerā which we used for the div tag containing all the buttons of the accordion side bar, using the dot selector, set the property values for the following attributes: width: 100%;max-width: 25rem; padding: 2rem; margin: 3rem auto; background: hsl(0, 0%, 14%); border-radius: 1rem; border: 1px solid #222; box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.55);
- For the class=āaccordionā , styling the html elements targeted, set the property values for the following attributes: background-color: #333; color: #eee; cursor: pointer; padding: 1rem; width: 100%; border: 1px solid #222; text-align: left; outline: none; font-size: 1rem; transition: all 0.4s ease-out; box-shadow: 0px 0px 34px -8px rgba(0, 0, 0, 0.75);
- Now for the class accordion, using the first-child CSS selector which is used to select the specified selector, only if it is the first child of its parent, we will set border-radius: 1rem 1rem 0 0;
- Again for the class accordion, using the nth-last-child(1) CSS selector, :nth-last-child selector allows you select one or more elements based on their source order, according to a formula. It is defined in the CSS Selectors Level 3 spec as a āstructural pseudo-classā, meaning it is used to style content based on its relationship with parent and sibling elements. We will setĀ border-radius: 0 0 1rem 1rem; and for the same selector, using the hover property of css we will set the background: crimson;
- For classes active and accordion:hover set the background-color: #426ef0;
- Setting these attribute values for the following selectors for the accordion class using the after property – Ā :after selector inserts something after the content of each selected element(s)..accordion:after { content: “\002B”; color: #eee; font-weight: bold; float: right; margin-left: 0.5rem; }
- For class active with after property using the content attribute – content: “\2212”;
- Using the content property for the class accordion which is used with the :before and :after pseudo-elements, to insert generated content, we will set these attributes for styling -padding: 0 1rem; background-color: #222; color: #aaa; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out;
- For the lists which contains the elements of buttons in the document we will set -.accordion-content ul { list-style-type: circle; margin: 1rem 0; padding: 0.2rem; } and .accordion-content ul li { padding: 0.2rem 0; }
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Html + Css Code Output:-
Step 3: Adding Javascript to give logic to our project
Here is the code, you can copy it to directly use it in your IDE for this project.
let acc = document.querySelectorAll(".accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
Let us understand the Javascript code:-
- We will create a variable acc and use the query selector for the accordion class.
- Creating another variable for the loop.
- Creating a for loop which contains the functionality of the accordion bar. Use the Event Listener with the click as event and adding a function for the buttons. With this, we complete the logic of the accordion sidebar.
- Our Accordion Side Bar has been successfully created and now letās take a look at the output:
Restaurant Website Using HTML And CSS With Source Code
Final Output Of Accordion Menu Using HTML,CSS and JavaScript:-
I hope that this article was helpful and you understood the whole project. Now letās take a look at the Live Preview of our Accordion Side Bar:-
We have successfully created our Accordion Side Bar using HTML, CSS, and JavaScript. You can use this project directly by copying it into yourĀ IDE. We hope you understood the project. If you have any doubts then feel free to comment them down!!
Follow: CodeWithRandom
Written by:Ā Cheshta Vohra
Code by: Marty-Development
