ADVERTISEMENT

Accordion Using HTML,CSS and JavaScript Code

Telegram Group Join Now

ADVERTISEMENT

Accordion Using HTML,CSS and JavaScript Code

Accordion Using HTML,CSS and JavaScript Code
Accordion Using HTML,CSS and JavaScript Code

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

Only Html Code Output:-

 

ADVERTISEMENT

Accordion Using HTML,CSS and JavaScript Code

 

Accordion Using HTML,CSS and JavaScript Code

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

ADVERTISEMENT

Accordion Using HTML,CSS and JavaScript Code

 

ADVERTISEMENT

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

Accordion Using HTML,CSS and JavaScript Code
Accordion Using HTML,CSS and JavaScript Code

 

Accordion Using HTML,CSS and JavaScript Code
Accordion Using HTML,CSS and JavaScript Code
 

Portfolio Website using HTML and CSS (Source Code)

ADVERTISEMENT

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.

ADVERTISEMENT

Thank you!

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT