Learn How to Create Hide Show Content Using JavaScript or Accordion/ Collapsible Content Using CSS. Hi, In this article, I will show you how to Create Accordion/ Collapsible Content Using CSS and JavaScript, HTML and CSS.
We will create an Accordion or collapsible content section for your website using HTML CSS and JavaScript. We can use HTML, CSS, and JavaScript coding to create stylish and dynamic web elements. And one useful element you can build is Accordion/ Collapsible Content Using CSS.
Create Accordion/ Collapsible Content Using CSS and JavaScript
You will learn how to create an Accordion menu or collapsible content section on your website. When the user clicks on the button, drop-down content will be displayed.
On clicking a second time the collapsible content will be hidden. Building an accordion section with HTML, and CSS is very important in a website. It occupies the minimum space and makes your website interactive for users.
Important Search Terms:
- How to Create Hide Show Content Using JavaScript?
- What is accordion JavaScript?
- How do you make an accordion in JavaScript?
- Can you use CSS and JavaScript together?
- What is an HTML accordion?
How to Use Font Awesome Icons in HTML Code
Source Codes
Now you will get the source codes to create Create Accordion/ Collapsible Content Using CSS and JavaScript.
HTML Source Code
The following is the HTML source code. Copy and paste the code into your project file.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<!-- Adding font awesome icons offline -->
<script src="https://kit.fontawesome.com/a797177d26.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>OUR SERVICES</h1>
<button class="accordion"> <i class="fas fa-user"></i> Web Design</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<button class="accordion"> <i class="fas fa-video"></i> Photography</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat</p>
</div>
<button class="accordion"> <i class="fas fa-edit"></i> Content Writing</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
</div>
<script src="accordion.js"></script>
</body>
</html>
CSS Source Code
The following code is the CSS code for the accordion. Copy and paste the below code into the CSS file of your web project.
body{
background-color: rgb(190, 127, 240);
}
.container{
padding: 100px;
}
.accordion {
background-color: darkolivegreen;
color: rgb(255, 255, 255);
cursor: pointer;
padding: 18px;
width: 100%;
border: solid 1px lightgray;
text-align: left;
outline: none;
font-size: 17px;
transition: 0.5s;
}
.active, .accordion:hover {
/* active class will be use in javascript */
background-color:rgb(53, 53, 53);
}
/* Adding font awesome icones in CSS code */
.accordion:after {
font-family: "Font Awesome 5 Free";
content: "\f13a";
font-weight: 900;
float: right;
margin-right: 10px;
}
.active:after {
font-family: "Font Awesome 5 Free";
content: "\f139";
font-weight: 900;
float: right;
margin-right: 10px;
color: chartreuse;
}
.panel {
padding: 0px 18px;
background-color: rgb(236, 236, 236);
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
button i {
margin-right: 6px ;
font-size: 20px;
}
Recommended Article: How to Make a Transparent Login Form in HTML with CSS Source Code
JavaScript Source Code
Below is the JavaScript source code to make the accordion collapsible and interactive. Copy and paste the following code into the JS file of your project.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
/* loop will continue to run till the length of accordion element */
acc[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";
}
});
}
Final Words
An accordion is a collapsible section of a web page. When the user clicks on the accordion button the content will be shown or hidden. We have created it by using HTML, CSS, and JavaScript code. Please don’t forget to subscribe to my YouTube Channel to watch more useful tutorials.
