Cvrp filter menu

by Rich Costello

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">




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

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

li { list-style:none;}

JavaScript

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