JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.js"></script>
<div class="filters">
	<h6>Filter by:</h6>
	<form class="testimonial_filter" id="procedure_sub_catergory">
		<legend>Types of Nose Surgery</legend>
		<input type="checkbox" id="subcat_nose-tip-surgery" value=".subcat_nose-tip-surgery"><label for="subcat_nose-tip-surgery">Nose Tip surgery</label>
		<br>
		<input type="checkbox" id="subcat_nasolectomy" value=".subcat_nasolectomy"><label for="subcat_nasolectomy">Nasolectomy</label>
		<br>
		<input type="checkbox" id="subcat_re-rhinoplasty" value=".subcat_re-rhinoplasty"><label for="subcat_re-rhinoplasty">Re-Rhinoplasty</label>
		<br>
		<input type="checkbox" id="subcat_rhinoplasty-2" value=".subcat_rhinoplasty-2"><label for="subcat_rhinoplasty-2">Rhinoplasty</label>
	</form>
	<form class="testimonial_filter" id="procedure_surgeon">
		<legend>Surgeon</legend>
		<input type="checkbox" id="surgeon_arthit-suchart" value=".surgeon_arthit-suchart"><label for="surgeon_arthit-suchart">Arthit Suchart</label>
		<br>
		<input type="checkbox" id="surgeon_prasert-wattana" value=".surgeon_prasert-wattana"><label for="surgeon_prasert-wattana">Prasert Wattana</label>
		<br>
		<input type="checkbox" id="surgeon_somsak-kamon" value=".surgeon_somsak-kamon"><label for="surgeon_somsak-kamon">Somsak Kamon</label>
		<br>
		<input type="checkbox" id="surgeon_somporn-kamon" value=".surgeon_somporn-kamon"><label for="surgeon_somporn-kamon">Somporn Kamon</label>
		<br>
		<input type="checkbox" id="surgeon_kulap-somporn" value=".surgeon_kulap-somporn"><label for="surgeon_kulap-somporn">Kulap Somporn</label>
	</form>
</div>

<div class="procedures">
	<div class="procedure_subcat subcat1">
		<h4 class="heading-dots-left">Nose Tip surgery</h4>
		<p>Fusce vel dui. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Maecenas tempus,...

CSS

.filters,
.procedures {
  padding: 3em;  
}
.filters {
  background: #f5f5f5;
  padding-bottom: 3em;
  border-bottom: 1px solid #ddd;
  margin-bottom: 3em;
}

JavaScript

$('form.testimonial_filter :checkbox').on('change', function (event) {
	event.preventDefault();

	// Hide everything
	$('.testimonial_single').hide();

	// Create array of checked checkboxes
	var checked = $('form.testimonial_filter :checkbox:checked').map(function () {
		return $(this).val();
	}).get();

	// Hide sub-category if no testimonial found for criteria
  // THIS IS NOT WORKING YET...
	$('.procedure_subcat .row').each(function (index, el) {
		var hidden = $(el).find('.testimonial_single:hidden');
	});

	// Show all if nothing is checked
	if (jQuery.isEmptyObject(checked)) {
		$('.testimonial_single').show();
		return;
	}

	// Show the checked ones
	$.each(checked, function (index, val) {
		$(val).show();
	});
});