Filter Reports Bootstrap 4

This is a simple Twitter Bootstrap 4 template. To check BS4 and Bootstrap-table compatibility.

by Rich Costello

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Filter Reports
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body report-filter border-dark">
  <div class="row border-bottom border-dark">
  <div class="col-6">
   clear all 
  </div>
  <div class="col-6">
   apply 
  </div>
  <hr/>
  </div>
    <div class="option-heading">Date of Content</div>
    <div class="option-content is-hidden">
      <ul>
      <li><input type="radio"><span>New to Old</span></li>
      <li><input type="radio"><span>Old to New</span></li>
      </ul>
    </div>


    <div class="option-heading">Audience Type</div>
    <div class="option-content is-hidden">
       <ul>
       <li><input type="checkbox"><span>Business Type</span></li>      
       </ul>
    </div>


    <div class="option-heading">Subject Matter</div>
    <div class="option-content is-hidden">
       <ul>
       <li><input type="checkbox"><span>Dealers</span></li>
       </ul>
    </div>

    <div class="option-heading">Type of Report</div>
    <div class="option-content is-hidden">
       <ul>
       <li><input type="checkbox"><span>Case Studies</span></li>
       </ul>
    </div>
  </div>
</div>

CSS

.option-heading:after           { content: "\25bc"; float:right}
.option-heading.is-active:after { content: "\25b2"; float:right}
.option-heading {
  max-width:150px;
  height:20px;
}

/* Helpers */
.is-hidden { display: none; }

.option-content li { list-style:none;}


.card.card-body.report-filter {
    width: 25%;
}

JavaScript

/* main menu toogle */

$(".option-heading").on('click', function() {
    $(this).toggleClass('is-active').next(".option-content").stop().slideToggle(100);
  });