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

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

• Content Animation Effect
  None

  JQuery

  slideToggle Fade Blind Bounce Clip Drop Explode Fold Highlight Puff Pulsate Scale Shake Size Slide

  CSS

  BounceBounce InboingInUpBounce In DownBounce In LeftBounce In RightBounce In UpFade InFade In DownFade In Down BigFade In LeftFade In Left BigFade In RightFade In Right BigFade In UpFade In Up BigFlashFlipFlip In XFlip In YfoolishInjelloLight Speed InperspectiveDownRetournperspectiveLeftRetournperspectiveRightRetournperspectiveUpRetournpuffInPulseRoll InRotate InRotate In Down LeftRotate In Down RightRotate In Up LeftRotate In Up RightrubberBandShakespaceInDownspaceInLeftspaceInRightspaceInUpswashInSwingTadatwisterInDowntwisterInUpvanishInWiggleWobblezoomInzoomInDownzoomInLeftzoomInRightzoomInUp
• Add Tab Icon
  Position

  right left

  Icon

  ▲ ▼ + − △ ▽ ⋙
• Accordion Settings and Style
  Open Multiple

  Active Item

  none 1 2 3

  Content Position

  Top Middle Bottom

  Content Align

  Left Center Right

<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>

.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;
}