Accessible Accordion With jQuery And Bootstrap 4

An accessible, user-friendly accordion component for Bootstrap 4 that makes it simple to navigate between accordion panels and accordion content using the keyboard.

How to use it:

1. Load the necessary jQuery library and Bootstrap framework in the document.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>

2. The markup structure for the accessible accordion.

<div class="comp-information">
  <div class="information__accordion js-information" id="informationAccordion">
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">
          <!-- NOTE: For change the arrow position toggle class .collapsed ( for collapsed add class .collapsed | for expanded remove class .collapsed ) -->
          <button type="button" class="btn" data-toggle="collapse" data-target="#collapse-details" aria-expanded="true" aria-controls="collapse-details" title="Accordion 1">
            <span class="js-information_tooltip" data-toggle="tooltip" data-placement="bottom">Accordion 1</span> 
          </button>
        </h5>
      </div>
      <!-- NOTE: For show the collapses content add class .show -->
      <div class="collapse" id="collapse-details" data-parent="">
        <div class="card-body">
          Accordion Content Here
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <h5 class="mb-0">
          <!-- NOTE: For change the arrow position toggle class .collapsed ( for collapsed add class .collapsed | for expanded remove class .collapsed ) -->
          <button type="button" class="btn js-information_tooltip collapsed" data-toggle="collapse" data-target="#accessRights-collapse" aria-expanded="false" aria-controls="accessRights-collapse" title="Accordion 2">
            <span class="js-information_tooltip" data-toggle="tooltip" data-placement="bottom">Accordion 2</span>
          </button>
        </h5>
      </div>
      <!-- NOTE: For show the collapses content add class .show -->
      <div class="collapse" id="accessRights-collapse" data-parent="">
        <div class="card-body">
          Accordion Content Here
        </div>
      </div>
    </div>
  </div>
</div>

3. The example CSS rules for the accessible accordion.

.comp-information {
  width: 100%;
}
.comp-information a {
  color: #007fad;
  text-decoration: underline;
}
.comp-information a:hover, .comp-information a:focus {
  color: #006589;
}
.comp-information .information__accordion .card {
  border-radius: 4px;
  margin-bottom: 20px;
}
.comp-information .information__accordion .card p {
  margin-bottom: 0;
}
.comp-information .information__accordion .card p + p {
  margin-top: 1rem;
}
.comp-information .information__accordion .card-header {
  padding: 0;
  border-radius: 0;
}
.comp-information .information__accordion .card-header .btn {
  position: relative;
  width: 100%;
  text-align: inherit;
  -webkit-box-pack: start;
          justify-content: flex-start;
  font-size: 22px;
  padding-top: 9px;
  padding-bottom: 9px;
  padding-right: 55px;
  background-color: #f3f3f3;
  border: none;
}
.comp-information .information__accordion .card-header .btn::after {
  position: absolute;
  content: "";
  top: 0;
  right: 16px;
  width: 22px;
  height: 100%;
  background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="15"> <path fill="rgb(0, 127, 173)" fill-rule="evenodd" d="M12-.001l12 11.797-3.259 3.203L12 6.406l-8.741 8.593L0 11.796 12-.001z"/> </svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  height: 26px;
  top: 27%;
}
.comp-information .information__accordion .card-header .btn.collapsed:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
@media (max-width: 767.98px) {
  .comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) {
  .comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .comp-information .information__accordion .card-header .btn, .comp-information .information__accordion .card-body {
    padding-left: 25px;
    padding-right: 25px;
  }
}
.comp-information .information__accordion .card-body {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #fbfbfb;
}
@media (max-width: 767.98px) {
  .comp-information .information__accordion .card-body {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 768px) {
  .comp-information .information__accordion .card-body {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .comp-information .information__accordion .card-body {
    padding-left: 25px;
    padding-right: 25px;
  }
}

4. Add keyboard interactions to the accessible accordion.

// Accessible  -  Define values for keycodes
function keyCodes() {
  this.tab = 9;
  this.untab = 16;
  this.enter = 13;
  this.escape = 27;
  this.space = 32;
  this.end = 35;
  this.home = 36;
  this.left = 37;
  this.up = 38;
  this.right = 39;
  this.down = 40;
}

// Accessible - bootstrap accordion
function accessible_bootstrap_accordion() {
  var keys = new keyCodes();

  // Tabs nav links
  $(document).on('keydown', '.comp-information [data-toggle="collapse"]', function (e) {
    var currentBtn = $(this),
        currentCardWrapper = currentBtn.parents('.card');

    function next() {
      $(currentCardWrapper.next().find('[data-toggle="collapse"]').focus().attr('data-target')).collapse('show');
    }
    function prev() {
      $(currentCardWrapper.prev().find('[data-toggle="collapse"]').focus().attr('data-target')).collapse('show');
    }

    if (e.which === keys.down) {
      e.preventDefault(); // Disable arrow key scrolling
      $(currentBtn.attr('data-target')).collapse('hide');
      
      if (currentCardWrapper.next('.card').length) {        
        next();  
      } else {
        prev();
      }
      
    } else if (e.which === keys.up) {
      e.preventDefault(); // Disable arrow key scrolling
      $(currentBtn.attr('data-target')).collapse('hide');

      if (currentCardWrapper.prev('.card').length) {
        prev();
      } else {
        next();
      }
    }
  });
}

// document.ready
jQuery(document).ready(function ($) {  
  accessible_bootstrap_accordion();
});

---

This awesome jQuery plugin is developed by Bizo_dam. For more Advanced Usages, please check the demo page or visit the official website.