How to create a Instagram login Page in HTML & CSS | Frontend Everything

  

Simple Accordion Using Bootstrap 5 | By Frontend Everything

Hello Everyone 👋Welcome to My New Blog Post! Today I have made a Simple Accordion with the help of Bootstrap and some CSS  | We have used no javascript in this 😎

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making the simple accordion in bootstrap step by step -

First,

We will import the bootstrap CDN from the official website of bootstrap5.

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  

The second part,

We will import javascript of bootstrap5

 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>  

Now we have to write the bootstrap code,

 <div class="container"><br>  
  <h1 class="heading">Accordion in Bootstrap </h1>  
  <div class="accordion" id="accordionExample">  
   <div class="accordion-item">  
    <h2 class="accordion-header" id="headingOne">  
     <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">  
      Accordion Item #1  
     </button>  
    </h2>  
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">  
     <div class="accordion-body">  
      <strong>This is item #1</strong> Here is the sample text .  
     </div>  
    </div>  
   </div>  
   <div class="accordion-item">  
    <h2 class="accordion-header" id="headingTwo">  
     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">  
      Accordion Item #2  
     </button>  
    </h2>  
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">  
     <div class="accordion-body">  
      <strong>This is item #2</strong> Here is the sample text .  
     </div>  
    </div>  
   </div>  
   <div class="accordion-item">  
    <h2 class="accordion-header" id="headingThree">  
     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">  
      Accordion Item #3  
     </button>  
    </h2>  
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">  
     <div class="accordion-body">  
      <strong>This is item #3</strong> Here is the sample text .  
     </div>  
    </div>  
   </div>  
  </div>  
 </div>  

The final part is we have to write some CSS so that things like an outline, the border can remove.

 body{  
  background: #F2F2F2;  
 }  
 .accordion,  
 .accordion-item,  
 .accordion-header {  
  outline: 0 !important;  
  border: none;  
 }  
 .accordion-button:focus {  
  border: 0 !important;  
  outline: 0 !important;  
  box-shadow: none !important;  
 }  
 .accordion-button:not(.collapsed) {  
  color: #171717 !important;  
  background-color: #f6f6f6 !important;  
  box-shadow: none !important;  
 }  

This Is The Final Output 😍😎

output in video

output in image

To make your work easier here is the codepen link 🤩. don't forget to follow me there if you liked the project 😄.

See the Pen Untitled by Piyush (@CodedByPiyush) on CodePen.

Click here if this doesn't work

.

.

.

.

.

.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development  Daily.

.

More blogs you should give a check!

• A Simple card in Tailwind CSS
• Best Apps for Learning Coding
• Top-notch Project ideas For HTML< CSS< Javascript

• Best Platform To sell your Website Templates
• Google Homepage Clone With Html and css