Accordion Test

Doing a demo accordion for bootstrap 4 - opens by date

by Nate Armstrong

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h3>What actions should I be taking to secure my Financial Aid?</h3>

<div id="accordion">
  <div class="card">
    <div class="card-header" id="Heading-January-March">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#January-March" aria-expanded="true" aria-controls="January-March">
          January - March
        </button>
      </h5>
    </div>

    <div id="January-March" class="collapse show" aria-labelledby="Heading-January-March" data-parent="#accordion">
      <div class="card-body">
        <ul>
          <li>If you have not submitted the FAFSA, do it now! Don’t delay! You will receive a report from the federal processor after submitting the FAFSA. Check the report carefully for errors. Any errors that are found should be corrected. Errors can be corrected at <a href="http://www.fafsa.gov">www.fafsa.gov</a>, or you may call our office at 740-477-7716 for help.</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="Heading-April-June">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#April-June" aria-expanded="false" aria-controls="April-June">
          April - June
        </button>
      </h5>
    </div>
    <div id="April-June" class="collapse" aria-labelledby="Heading-April-June" data-parent="#accordion">
      <div class="card-body">
        <ul>
          <li>If you have completed your FAFSA, but have been selected for verification or have...

JavaScript

// designed to open the correct item by month
function getMonthFunction() {
    var d = new Date();
    var n = d.getMonth() + 1;
  switch(n) {
    case 1:
    case 2:
    case 3:
      document.getElementById("January-March").classList.add('show');
      break;
    case 4:
    case 5:
    case 6:
      document.getElementById("April-June").classList.add('show');
      break;
    case 7:
    case 8:
    case 9:
      document.getElementById("July-September").classList.add('show');
      break;
    case 10:
    case 11:
    case 12:
      document.getElementById("October-December").classList.add('show');
      break;
  } 
}

window.onload = function() {
  getMonthFunction();
};