Learn how to create a stunning accordion for your website with this ultimate guide. From HTML structure to advanced CSS styling and JavaScript functionality, you'll find everything you need to know to create a beautiful and responsive accordion.
Table of Contents
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.
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.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
