Looking for a way to filter div boxes using navigation? Check this out:
<ul>
<li><a href="javascript:void(0);" data-target="apples">Appels</a></li>
<li><a href="javascript:void(0);" data-target="bananas">Bananas</a></li>
<li><a href="javascript:void(0);" data-target="pineapples">Pineapples</a></li>
</ul>
<div class="fruits bananas apples pineapples"></div>
<div class="fruits bananas"></div>
<div class="fruits pineapples apples"></div>
Trying to make sure hidden div boxes create space for upcoming elements when filtered? Here's a jQuery function that might help:
jQuery(document).ready(function() {
jQuery('a[data-target]').click(function() {
jQuery('.fruits').show().not('.' + this.dataset.target).hide();
});
});
Still encountering two issues:
In the front end, five rows exist with three div.fruits boxes each. Each box has a width of 33%. While the function hides unwanted boxes, there is whitespace left if a box on one row is hidden but not filled by the next row's first box.
The second requirement is that after filtering "apples" and then "pineapples," all previously hidden boxes should be considered in the new query.
Seeking code suggestions to solve these problems!
Check out my fiddle here: http://jsfiddle.net/Karicula/LXmjp/#&togetherjs=UImBqeN3DU Click on "Apples" to see the issue...