HTML Accordion Menu Generator JavaScript And JQuery

JQuery Generate online Accordion Tabs. JQuery Animation Effect Accordion Menu, JavaScript accordion tabs with CSS animation effect, Simple Pure HTML Accordion With CSS Animation. create fully responsive accordion on your website

Demo Accordion
Demo

Step 1

Add Accordion heading name and content and click insert button

Step 2

You can see the second box accordion title name content list. Drag up and down to rearrange

Step 3

Select accordion function JavaScript or JQuery or pure HTML accordion

Step 4

Select accordion content showing animation, JQuery Animation or CSS animation. and accordion head icon, content position style

Step 5

Click on the (Generate code) button and you will get accordion HTML CSS and JavaScript codes

Add Accordion Heading Name And Content

Insert

Accordion Heading And Content Drag And Reorder

  • 1
  • 2
  • 3
Accordion Function
  • Content Animation Effect
  • Add Tab Icon
  • Accordion Settings and Style
    Open Multiple
JQery Accordion
Click the Generate button again if any changes have been made
Generate code
JQuery Link
HTML
Paste this code between the body tag where you want it to appear
CSS
Paste this code between the head tag
JavaScript
Paste this code between the body tag, at the bottom of the page
Run code Edit Code Download Show Full Code

Pure HTML and CSS Accordion

Accordion tab without javaScript code. Use this HTML code to create multiple accordions on a page. You must change the input name and id

HTML
<div id="html-accordion" class="accordion">

  <div class="accordion-box">
    <input type="radio" name="acord" class="input-accordion" id="iacr_1" checked>
    <label class="accordion-header" for="iacr_1"><span>Heading 1</span></label>
    <div class="accordion-body animation_acrd bounceInDown">
      content 1
    </div>
  </div>

  <div class="accordion-box">
    <input type="radio" name="acord" class="input-accordion" id="iacr_2">
    <label class="accordion-header" for="iacr_2"><span>Heading 2</span></label>
    <div class="accordion-body animation_acrd bounceInDown">
      content 2
    </div>
  </div>

  <div class="accordion-box">
    <input type="radio" name="acord" class="input-accordion" id="iacr_3">
    <label class="accordion-header" for="iacr_3"><span>Heading 3</span></label>
    <div class="accordion-body animation_acrd bounceInDown">
      content 3
    </div>
  </div>

</div>
CSS
.accordion-box {
  margin-bottom: 2px;
}
.input-accordion {
  display:none;
}
.accordion {
  font-family: Arial,Helvetica,sans-serif;
  width: 500px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  max-width: 100%;
}
.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #515c63;
  color: #fff;
  padding: 10px 10px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-weight: bold;
}
.input-accordion:checked + .accordion-header {
  background-color: #0a806c;
}
.accordion-header:after {
  content: '\002B';
  color: #fff;
  font-weight: bold;
  transition: rotate 0.3s;
  font-size: 15px;
}
.input-accordion:checked + .accordion-header:after {
  content: '\2212';
}
.accordion-body {
  height: 150px;
  overflow: auto;
  display: none;
  position: relative;
  border: solid 2px #0a806c;
  border-top: none;
  text-align: left;
  font-size: 14px;
}
.input-accordion:checked ~ .accordion-body {
  display: block;
}
.accordion-content-flex {
  height: 100%;
  padding: 10px;
}

/************ CSS Animation ***********/

.animation_acrd {
  animation-duration: .5s;
  animation-fill-mode: both;
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px);
  }
  60% {
    opacity: 1;
    transform: translateY(30px);
  }
  80% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInDown {
  animation-name: bounceInDown;
}
Try it Yourself Download
Report Problem