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>
<head>
</head>
</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
<script>
var acc = document.getElementsByClassName(“accordion”);
var i;
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
You may also like How To Add A WhatsApp Number And A Message To A Link
More on: Simple Steps to upload a file to the Server with Php with Sample Codes
Leave a Reply