Accordion html | accordion html css code - Code With Random

Accordion HTML | Accordion HTML CSS code - Code With Random

Accordion html | accordion html css code - codewithrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create an Accordion HTML. We use HTML, and javascript for this Accordion HTML. Hope you enjoy our blog so let's start with a basic HTML structure for an Accordion Html. 

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 HTML code for the accordion html. Now, you can see output without css, then we write css for the Accordion Html
output :-
Accordion html | accordion html css code - codewithrandom

Accordion html | accordion html css code - codewithrandom

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 CSS section,  Here is our updated output CSS.

output
Accordion html | accordion html css code - codewithrandom

Now add JavaScript for functionality.

JavaScript code 

 const accordion = document.getElementsByClassName('container');  
 for (i=0; i<accordion.length; i++) {  
  accordion[i].addEventListener('click', function () {  
   this.classList.toggle('active')  
  })  
 }  
Final output
Accordion html | accordion html css code - codewithrandom



Accordion html | accordion html css code - codewithrandom

Now we have completed our JavaScript section,  Here is our updated output with JavaScript. Hope you like the Accordion Html . you can see 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 an Accordion html using simple HTML & CSS and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki

Post a Comment

Previous Post Next Post