How To Create A Simple Accordion with Source Code

What Is An Accordion?

An accordion is used to hide and show HTML contents on a webpage. It is usually placed vertically alongside sets of headings (title), content, call to action, and thumbnails. It is also a User experience element which permits a user to expand and collapse different section of contents. The main aim of an accordion is to present and organize information different forms of content to a use, and thus making it user-friendly.

An accordion can be created using HTML, CSS, and or JavaScript

How to Build an Accordion

An accordion is a common content tool found on many different websites nowadays, and today we will be building our own personal accordion in two different ways

1. Using HTML <details> Method

With HTML, an accordion can be built using <details> alongside <summary> elements. The <details> elements in this case acts as a container for the content while the <summary> help serve as the clickable toggle button to make the content visible.

Sample Code

<!DOCTYPE html>
<html>

</body>
  <details>
  <summary>Section 1</summary>
  <p>Paragraph for content 1</p>
<button>Learn More</button>
</details>

<details>
  <summary>Section 2</summary>
  <p>Paragraph for content 2</p>
  <img src=”image-here.png”>
</details>

</body>
</html>

You can also add some styling’s to it if you want and also as many <details> as you require

2. Using HTML, CSS and JavaScript

We’ll be using HTML buttons, div, classes and id in other to achieve this, with CSS mainly for styling, and JavaScript for functionality

Firstly, we are going to create out interface with HTML, then add CSS after we have laid out interface
We’ll be using <button> with classes, <div>with classes as well to be about to control certain features like the width, size, background-color, color, display, etc
The below sample code is for the HTML layout and CSS design

Sample Code

<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.accordion {
background-color: rgb(102, 102, 102);
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: 1px solid black;
text-align: left;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: rgb(0, 25, 34);
color:white;
}

.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
</style>
</head>
<body>

<h2>My Accordion</h2>

<button class=”accordion”>Section 1</button>
<div class=”panel”>
<p>Content one here…</p>
</div>

<button class=”accordion”>Section 2</button>
<div class=”panel”>
<p>Content two here…</p>
</div>

<button class=”accordion”>Section 4</button>
<div class=”panel”>
<p>Content three here…</p>
</div>

<button class=”accordion”>Section 3</button>
<div class=”panel”>
<p>Content four here…</p>
</div>

</body>
</html>

Now we have our design ready but with no functionalities. So to begin we are going to create a JavaScript that will get the total number of accordion present and then using if condition to hide and show each of them when they are clicked

Sample JS Code

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener(“click”, function() {
this.classList.toggle(“active”);
var panel = this.nextElementSibling;
if (panel.style.display === “block”) {
panel.style.display = “none”;
} else {
panel.style.display = “block”;
}
});
}
</script>

You can place the script before the </body> so that you can witness its magic or you can create a different page (say accordion.js), copy the script and place in it without including the <script> and </script>.

NB:
if you created a different page then make sure they are in the same folder or you can place its directory in the page containing the html as <script type=”text/javascript” src=”accordion.js”> </script> (if in same folder), <script type=”text/javascript” src=”path_to_script/accordion.js”> </script>

Feel free to try any of the above scripts of your choice

How To Create A Simple Accordion with Source Code

Leave a Reply Cancel reply