JSFiddle - React, Tailwind, and code Playground
HTML
<div id="fil">
<button rel="all">Все</button>
<button rel="1">1</button>
<button rel="2">2</button>
<button rel="3">3</button>
<button rel="4">4</button>
<button rel="5">5</button>
</div>
<div class="viborka all 1">выборка</div>
<div class="viborka all 1">выборка</div>
<div class="viborka all 1">выборка</div>
<div class="viborka all 1">выборка</div>
<div class="viborka all 1">выборка</div>
<div class="viborka all 2">выборка</div>
<div class="viborka all 2">выборка</div>
<div class="viborka all 2">выборка</div>
<div class="viborka all 2">выборка</div>
<div class="viborka all 2">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 3">выборка</div>
<div class="viborka all 4">выборка</div>
<div class="viborka all 4">выборка</div>
<div class="viborka all 4">выборка</div>
<div class="viborka all 4">выборка</div>
<div class="viborka all 4">выборка</div>
<div class="viborka all 5">выборка</div>
<div class="viborka all 5">выборка</div>
<div class="viborka all 5">выборка</div>
<div class="viborka all 5">выборка</div>
<div class="viborka all 5">выборка</div>
<div class="viborka all 5">выборка</div>
JavaScript
$(document).ready(function () {
$("#fil button").click(ChooseFromButtonClick);
ChooseFromHash();
});
function ShowChosen(selector) {
var newSelection = "";
$("#fil button").removeClass("active");
newSelection = selector.addClass("active").attr("rel");
$(".viborka").not("." + newSelection).slideUp();
$("." + newSelection).slideDown();
window.location.hash = newSelection;
};
function ChooseFromHash() {
if (window.location.hash !== "") {
ShowChosen($("button[rel='" + window.location.hash.replace('#', '') + "'"));
}
}
function ChooseFromButtonClick() {
ShowChosen($(this));
}