JSFiddle - React, Tailwind, and code Playground

by Kelly Hawker

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion" role="tablist" aria-live="polite">

  <div class="accordion-container">
    <div class="title" id="tab0" tabindex="0" aria-controls="panel0" aria-selected="false" aria-expanded="false" role="tab">
      <h4>Mission</h4>
    </div>
    <div class="accordion-content" id="panel0" aria-labelledby="tab0" aria-hidden="true" role="tabpanel">

      <p>Test Test Test</p>

    </div>
  </div>

  <div class="accordion-container">
    <div class="title" id="tab1" tabindex="1" aria-controls="panel1" aria-selected="false" aria-expanded="false" role="tab">
      <h4>Vision</h4>
    </div>
    <div class="accordion-content" id="panel1" aria-labelledby="tab1" aria-hidden="true" role="tabpanel">

      <p>Test Test</p>

    </div>
  </div>

  <div class="accordion-container">
    <div class="title" id="tab2" tabindex="2" aria-controls="panel2" aria-selected="false" aria-expanded="false" role="tab">
      <h4>Values</h4>
    </div>
    <div class="accordion-content" id="panel2" aria-labelledby="tab2" aria-hidden="true" role="tabpanel">

      <p>
        Test
      </p>

    </div>
  </div>

</div>

CSS

.accordion-content {
  display: none;
}

JavaScript

$('#accordion .title h4').click(function() {
  var title = $(this).closest('.accordion-container').find('.title'),
    content = $(this).closest('.accordion-container').find('.accordion-content');

  if (title.attr('aria-selected') === 'false') {
    title.attr('aria-selected', 'true');
    title.attr('aria-expanded', 'true');
    content.attr('aria-hidden', 'false');
  } else {
    title.attr('aria-selected', 'false');
    title.attr('aria-expanded', 'false');
    content.attr('aria-hidden', 'true');
  }
  $(this).parent().next().slideToggle(400).siblings('.accordion-content').slideUp(400);
  return false;
});