Accordion Using HTML,CSS and JavaScript Code
Welcome to the Codewithrandom blog. In this blog, We learn how to create an Accordion. We use HTML, CSS, and JavaScript for this Accordion.
I hope you enjoy our blog so let’s start with a basic html structure for an Accordion.
HTML Code For Accordion
<body> <div class="accordion-body"> <div class="accordion"> <h1>Frequently Asked Questions</h1> <hr> <div class="container"> <div class="label">Who is codewithrandom</div> <div class="content">My name is ankit ,i am 1st year student of bca and working on providing free content in frontend development and have a aim of providing most premium frontend development course free in 2022 March .</div> </div> <hr> <div class="container"> <div class="label">What is main aim?</div> <div class="content">have a aim of providing most premium frontend development course free in 2022 March . </div> </div> <hr> <div class="container"> <div class="label">What you want form us </div> <div class="content">need your 1 like an comment for motivation thats it</div> </div> <hr> <div class="container"> <div class="label">Where find best project ?</div> <div class="content">Guys search codewithrandom on google,i upload almost 100+ frontend project and that's enough for polishe your skills in html css javascript. </div> </div> </div> </div> <script src="index.js"></script> </body>
There is all the html code for the Accordion. Now, you can see output without Css and JavaScript. then we write Css for the Styling Accordion and Give Open and Close Functionality Using JavaScript.
50+ HTML, CSS & JavaScript Projects With Source Code
Only Html Code Output:-
CSS Code For Accordion
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
/* Sets the background color of the body to blue. Sets font to Rubik */
body {
background-color: #0A2344;
font-family: 'rubik', sans-serif;
}
/* Aligns the heading text to the center. */
h1 {
text-align: center;
}
/* Sets the width for the accordion. Sets the margin to 90px on the top and bottom and auto to the left and right */
.accordion {
width: 800px;
margin: 90px auto;
color: black;
background-color: white;
padding: 45px 45px;}
.accordion .container {
position: relative;
margin: 10px 10px;
}
/* Position the labels relative to the .container. Add padding to the top and bottom and increase font size. Also make it's cursor a pointer */
.accordion .label {
position: relative;
padding: 10px 0;
font-size: 30px;
color: black;
cursor: pointer;
}
.accordion .label::before {
content: '+';
color: black;
position: absolute;
top: 50%;
right: -5px;
font-size: 30px;
transform: translateY(-50%);
}
.accordion .content {
position: relative;
background: white;
height: 0;
font-size: 20px;
text-align: justify;
width: 780px;
overflow: hidden;
transition: 0.5s;
}
Add a horizontal line between the contents
.accordion hr {
width: 100;
margin-left: 0;
border: 1px solid grey;
}
/* Unhides the content part when active. Sets the height */
.accordion .container.active .content {
height: 150px;
}
/* Changes from plus sign to negative sign once active */
.accordion .container.active .label::before {
content: '-';
font-size: 30px;
}Now we have completed our Styling of the Accordion. Here is our updated output HTML + CSS.
Output
5+ HTML CSS Projects With Source Code
Now add JavaScript for Open Accordion and Close on Button Press functionality.
JavaScript Code For Accordion
const accordion = document.getElementsByClassName('container');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active')
})
}Final Output Of Accordion Using HTML,CSS, and JavaScript
Portfolio Website using HTML and CSS (Source Code)
Now we have completed our Accordion. Here is our updated output with Html, Css, and JavaScript. Hope you like the Accordion. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to Create Accordion Using HTML, CSS, and JavaScript Code. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
