We refer an accordion to a pop-up or slide down content container which can be hidden or toggled on demand. There are various sorts of accordions ranging from pure CSS accordion with CSS transitions, which are built with the incorporation of with incorporating div class and button class. A div class represents the structure which can be styled accordingly and a button class is used to incorporate a button which can be coded/programmed to act as a switch for the toggle operation.
We can simply make accordions using html and CSS transitions, but to add some level of responsiveness or functionality of animation we require the use of JS (JavaScript) which is a scripting language used to add programming features to the web page. We can use pure JavaScript for front and both back-end functions. We can utilise JavaScript to build a simple accordion, accordion panel with accordion items or an accordion menu. Since accordion or can be made that way with simple scripting, JavaScript can add an animation to that too!
This tutorial will lead us through creating a simple accordion in JS (JavaScript) with the functionality of some animation and toggle operations using the event listener functions. Like the event listener, JavaScript allows the user to integrate multiple forms of algorithms and pre-built functions that are useful in creating responsiveness and adding a touch of creativity to a web page.
Starting Off With HTML
- Use any sort of code editor, such as VScode, or any other platform to start off with your project.
- Name your project, create a HTML file and paste the following code snippet in your file.
<button class="acc1">First Accordion</button> // the class command specifies the name of the element to be styled in css.
<div class="p1"> <p>lorem ipsum</p> //Here p1 can be accessed in the css sheet as .p1 and styled further.
</div>
<button class="acc2">Second Accordion</button>
<div class="p2"> <p>lorem ipsum</p>
</div>
Adding CSS (Cascading Style Sheets)
- Make another file in the same directory as your HTML file and save it with a .css extension, now paste the following code snippet in the file.
We utilise CSS or CSS3 to make your html content look prettier. CSS does not carry any sort of functional powers and it cannot manipulate the content itself, although it dictates where the content is supposed to be. In our case, we will apply a set of custom CSS to our responsive accordion. It utilises the default variables and default options as they are built into the CSS framework.
/* This block of code will impact the button we have named “acc1” */
.acc1 {
background-color: #a9a1ad;
cursor: pointer;
padding: 10px; /*This adds padding on all four edges of the container */
width: 100%; /*This means that the width will stretch along the entire width of the window */
text-align: left;
transition: 0.3s;
}
/* .active will add a background colour to the button container once it is clicked on/hovered over, .active will be called in JS */
.active, .acc1:hover {
background-color: #5c585e;
}
/* This will style the panel which will contain the content of the accordion */
.p1 {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
/* This block of code will impact the button we have named "acc1" */
.acc2 {
background-color: #a9a1ad;
cursor: pointer;
padding: 10px; /*This adds padding on all four edges of the container */
width: 100%; /*This means that the width will stretch along the entire width of the window */
text-align: left;
transition: 0.3s;
}
/* .active will add a background colour to the button container once it is clicked on/hovered over, .active will be called in JS */
.active, .acc2:hover {
background-color: #5c585e;
}
/* This will style the panel which will contain the content of the accordion */
.p2 {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
Once your styling is completed, you can now view your accordion in your web page, it will not have any reaction when a user clicks on the accordion, once the JavaScript function is called, whenever a user clicks on the accordion, it will call the active class and the functionality will be displayed.
JavaScript (JS) Functionality (For Animated Accordions)
We use JavaScript for adding functionality to your projects and it requires any prerequisites to install in order for it to work. The following accordion click-event is basically a call function for the active state of the accordion, it works by simply managing the height of the accordion drop-down where the content is hidden, once clicked, it expands the accordion and reveals the hidden content inside.
- Create another file in your project directory and save it with a .js extension which will render it as a JavaScript file, you can also simply use the tag in your html file to run the JS function.
- Now, paste the following code snippet in your file or <script> tag.
<style>
/* this will add a style to your accordion function, allowing it to determine a max-height to which it will expand, the height is relative to the content */
.panel {
max-height: 0;
padding: 0 10px;
background-color: #a9a1ad;
transition: max-height 0.2s ease-out;
overflow: hidden;
}
</style>
<script>
/*only use <script> tag if you doing this inside your html file, if you have a different .js file for functions, add it in there */
var acco1 = document.getElementsByClassName("acc1");
var i;
for (i = 0; i < acco1.length; i++) {
acco1[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>If you plan to make multiple accordions, paste this function again inside the same <script> tag OR your .js file and change the control variable to acc2.
