Introduction:
Accordions are a type of UI element that are used to display content on a web page in a collapsible and expandable format. They allow you to show or hide content with a single click, making them an effective way to present information in a clear and organized manner. In this tutorial, we will go over how to create an accordion using HTML, CSS, and JavaScript.
Accordions are useful when you need to organize lots of information in a vertically limited space. The headers let the user scan through the main subjects of the content, and choose which of the subjects they would like to examine in depth by clicking on it. It’s very useful for FAQs and complex contact forms.
Benefits of using Accordions
There are several benefits to using accordions in web design, including:
- Improved User Experience:Â Accordions help to declutter a web page and improve the user experience by allowing users to easily access the information they need.
- Space Saving:Â Accordions can help save space on a web page by collapsing content that is not currently needed.
- Easy to Use:Â Accordions are simple and straightforward to use, making them a great option for users of all skill levels.
Let’s start making these amazing simple accordion Using HTML, CSS, and JavaScript step by step.
Source Code:
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our accordion.
This is an HTML code snippet that creates an accordion, a user interface element that allows users to toggle the display of content by clicking on a button. The code creates a container with three buttons, each representing a topic, and their corresponding panel that contains text describing the topic.
The first part of the code defines the document type and language, as well as the title and character set. The viewport meta tag is also included to ensure the webpage fits the user’s device screen. The two links to external style sheets are for custom styles and an icon library.
The container div includes the heading “Accordions” and three buttons with class “accordion” and corresponding divs with class “panel”. When a user clicks on a button, its corresponding panel is displayed or hidden depending on its current state. The content inside each panel describes a different topic related to front-end development.
Finally, the script tag at the bottom of the code loads a JavaScript file that contains the functionality for the accordion. The type “module” indicates that the script uses ES6 module syntax.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Accordion with HTML, CSS and JavaScript</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="container">
<h1>Accordions</h1>
<button class="accordion">Front-End Projects</button>
<div class="panel">
<p>
Are you trying to launch your career in front-end development? Then
you need to have an interesting portfolio. Not only that, you need to
have significant experience and skill in front-end development to bag
the job of your dreams.
</p>
</div>
<button class="accordion">Programming Languages</button>
<div class="panel">
<p>
If your career advancement or career change plans require you to
master a programming language, you may be wondering which language to
learn. we recommend choosing something more modern, widely used and
contains lots of packages or libraries.
</p>
</div>
<button class="accordion">JavaScript Frameworks</button>
<div class="panel">
<p>
A JavaScript framework is a type of tool that helps developers work
with JavaScript. Technically, it is an abstraction written in
JavaScript, i.e. a kind of simplification of the problem under
consideration.
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2 (CSS Code):
Next, we need to style our  accordion by adding our CSS. This will give our accordion an upgraded presentation.
The .panel class defines the styles for the panel which includes a white background, left and right borders of 1 pixel thickness and color of whitesmoke, padding of 0 pixels on top and bottom and 20 pixels on the left and right, a maximum height of 0 and overflow set to hidden to initially hide the content of the panel. The transition property is also set to make the panel’s maximum height change smoothly with a duration of 0.2 seconds and an ease-in-out timing function.
The .container class defines the styles for a container element that wraps the panel. It sets the width to 80% of the parent element, with a maximum width of 600 pixels, and centers the container element with a margin of 50 pixels on top and bottom and auto on the left and right.
The .accordion class defines the styles for the button that triggers the panel to expand or collapse. It sets the width to 100% of the parent element, with a background color of whitesmoke, no border or outline, left-aligned text, padding of 15 pixels on top and bottom and 20 pixels on the left and right, font size of 18 pixels, color of #333, and a cursor of pointer. It also sets a transition effect on the background color property with a duration of 0.2 seconds and a linear timing function.
The :after pseudo-element is used to add an icon to the right of the button text using a font from Font Awesome. When the button is in its open state, the icon changes to indicate that the panel is expanded. The .is-open class is added to the button when the panel is open.
Finally, the :hover pseudo-class and the .is-open class are used to change the background color of the button when hovered or when the panel is open, respectively, to give visual feedback to the user.
Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
.panel {
background-color: white;
border-left: 1px solid whitesmoke;
border-right: 1px solid whitesmoke;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
.container {
width: 80%;
max-width: 600px;
margin: 50px auto;
}
button.accordion {
width: 100%;
background-color: whitesmoke;
border: none;
outline: none;
text-align: left;
padding: 15px 20px;
font-size: 18px;
color: #333;
cursor: pointer;
transition: background-color 0.2s linear;
}
button.accordion:after {
content: "\f150";
font-family: "fontawesome";
font-size: 18px;
float: right;
}
button.accordion.is-open:after {
content: "\f151";
}
button.accordion:hover,
button.accordion.is-open {
background-color: #ddd;
}
Step 3 (JavaScript Code):
Finally, we’ll add the JavaScript that makes the accordion collapse and expand.
The code starts by selecting all elements with this class name and storing them in a constant variable called accordionBtns.
The forEach() method is then called on accordionBtns, which loops through each element and applies a function to it. The function is defined using an arrow function notation, and it is executed when the element is clicked.
Inside the function, the classList.toggle() method is called on the clicked element, which toggles the presence of the “is-open” class. This class can be used to change the appearance of the element, for example, to show or hide a content area.
The nextElementSibling property is then used to get the next sibling of the clicked element, which should contain the content to be shown or hidden. The maxHeight style property of this content element is then checked to see if it has a value. If it has a value, it means that the content is currently visible, and the maxHeight property is set to null, which hides the content. If it does not have a value, it means that the content is currently hidden, and the maxHeight property is set to the height of the content using the scrollHeight property plus the “px” string. This shows the content by setting its maximum height to the actual height of the content.
Create a JavaScript file with the name of  script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.
const accordionBtns = document.querySelectorAll(".accordion");
accordionBtns.forEach((accordion) => {
accordion.onclick = function () {
this.classList.toggle("is-open");
let content = this.nextElementSibling;
console.log(content);
if (content.style.maxHeight) {
//this is if the accordion is open
content.style.maxHeight = null;
} else {
//if the accordion is currently closed
content.style.maxHeight = content.scrollHeight + "px";
console.log(content.style.maxHeight);
}
};
});
Final Output:
Conclusion:
In conclusion, creating a stunning  accordion with HTML, CSS, and JavaScript is an achievable task for frontend developers. In this guide, we have covered the steps needed to create a functional and visually appealing accordion that can be used on any website or application.
Starting with the HTML structure, we have outlined the steps to create the necessary containers, headers, and content for each section of the accordion. We then applied basic CSS styling to the accordion to give it a cohesive look and feel.
Next, we added JavaScript functionality to the accordion, allowing users to toggle the display of the content when clicking on the headers. We also explored some advanced CSS styling techniques to make the accordion more responsive and engaging.
By following these steps, you can create a beautiful and functional accordion for your website or application. With some creativity and experimentation, you can customize the accordion to fit the needs of your project and make it stand out from the rest.
Remember to keep the user experience in mind when creating an accordion, and test the functionality across different devices and screen sizes to ensure it works well for all users. We hope this guide has been helpful in your accordion development journey and has inspired you to create stunning user interfaces with HTML, CSS, and JavaScript.
