I found a nice filter and used it on my little home-work. I would like to keep the h2 element visible during filtering, if its not empty. Thought it would be possible to use multiple data-id, but it did not work for me. I am curious what solutions others might have for me.
EDIT: I would like to change question a little bit. There shouldnt be empty header when its filtered.
So possibly I am looking for the way to toggle element h2 ->".hide" when the next elements with data-pobocka="XY" are empty.
$(document).ready(function() {
var $lectures = $('.beseda'),
$filters = $("#filters input[type='checkbox']"),
product_filter = new ListOfLecturesFilter($lectures, $filters);
product_filter.init();
});
function ListOfLecturesFilter(lectures, filters) {
var _this = this;
this.init = function() {
this.lectures = lectures;
this.filters = filters;
this.bindEvents();
};
/*remove checked boxes when click*/
this.bindEvents = function() {
this.filters.click(this.filtrBeseda);
$('#none').click(this.removeAllFilters);
};
this.filtrBeseda = function() {
_this.lectures.hide();
var filtredLectures = _this.lectures;
var filterAttributes = $('.filter-attributes');
filterAttributes.each(function(){
var selectedFilters = $(this).find('input:checked');
if (selectedFilters.length) {
var selectedFiltersValues = [];
selectedFilters.each(function() {
var currentFilter = $(this);
selectedFiltersValues.push("[data-" + currentFilter.attr('name') + "='" + currentFilter.val() + "']");
});
filtredLectures = filtredLectures.filter(selectedFiltersValues.join(','));
}
});
filtredLectures.show();
};}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='filters' class='seznamBesed'>
<br>
<div class='filter-attributes'>
<div class=" nazev-filtru pobocka">Pobočka</div>
<label for='Vozovna'>Vozovna</label><input type='checkbox' name='pobocka' id='Vozovna' value='Vozovna' />
<label for='Kralikov'>Kralíkov</label><input type='checkbox' name='pobocka' id='Kralikov' value='Kralikov'/>
</div>
<br>
<div class='filter-attributes'>
<div class="nazev-filtru proKoho">Věková kategorie </div>
<label for='ms' >Mateřská škola</label><input type='checkbox' name='proKoho' id='ms' value='ms'/>
<label for='zs1' >První stupeň</label><input type='checkbox' name='proKoho' id='zs1' value='zs1'/>
<label for='zs2' >Druhý stupeň</label><input type='checkbox' name='proKoho' id='zs2' value='zs2' />
</div>
<br>
<div class='filter-attributes'>
<div class="nazev-filtru obor"> Témata</div>
<div>
<label for='knihy'>Knihy </label><input type='checkbox' name='obor' id='knihy' value='knihy'/>
<label for='eko'>Ekologie</label><input type='checkbox' name='obor' id='eko' value='eko' />
<label for='media'>Mediální gramotnost</label><input type='checkbox' name='obor' id='media' value='media'/>
</div>
</div>
<br>
<div class="seznamBesed" id="seznamBesedId">
<h2> Vozovna </h2>
<div class='beseda' data-pobocka='Vozovna' data-proKoho='zs1' data-obor='eko'>
<div class="nazev">Filter Vozovna zs1 eko</div>
</div>
<div class='beseda' data-pobocka='Vozovna' data-proKoho='ms' data-obor='knihy'>
<div class="nazev">Filter Vozovna ms knihy</div>
</div>
<h2> Kralíkov </h2>
<div class='beseda' data-pobocka='Kralikov' data-proKoho='ms' data-obor='media'>
<div class="nazev">Filter Kralikov ms media</div>
</div>
<div class='beseda' data-pobocka='Kralikov' data-proKoho='zs2' data-obor='knihy'>
<div class="nazev">Filter Kralikov zs2 knihy</div>
</div>
</div>