Filter-Area
CODE
×
HTML
<div class="container mt-5 mb-5"><div class='filter-area row justify-content-center'> <button class='btn btn-secondary active small' data-filter='0'>All</button> <button class='btn btn-secondary small' data-filter='1'>Filter 1</button> <button class='btn btn-secondary small' data-filter='2'>Filter 2</button> <button class='btn btn-secondary small' data-filter='3'>Filter 3</button> </div></div>
CSS
button.btn.btn-secondary.active.small { font-family: var(--body-font-boldstrong-1); font-style: var(--body-font-boldstrong-2); font-weight: var(--body-font-boldstrong-3); width:auto; border-width: var(--lw3); padding-left: var(--pl-b); padding-bottom: var(--pb-b); padding-right: var(--pr-b); padding-top: var(--pt-b); letter-spacing: var(--bls); word-spacing: var(--bws); text-transform: var(--btt); font-size: var(--fs-xxs); color: var(--fpb); background-color: var(--bsc2); border-color: var(--lsc2); margin-top: 12px; margin-right: 12px; margin-bottom: 12px; margin-left: 12px; } @media screen and (max-width: 575px) { button.btn.btn-secondary.active.small { width:auto; } }
JS
$(document).ready(function () { $(".filter-area button").click(function () { // Aktive Klasse entfernen und zum geklickten Button hinzufügen $(".filter-area button").removeClass("active"); $(this).addClass("active"); // Filterwert des geklickten Buttons holen var filterValue = $(this).attr("data-filter"); // Alle Teaser-Elemente ausblenden $("a.teaser").css("display", "none"); $(".container[data-country]").css("display", "none"); if (filterValue === "0") { // Wenn "All" geklickt wurde, alle Teaser-Elemente einblenden $("a.teaser").css("display", "flex"); $(".container[data-country]").css("display", "inline-block"); } else { // Andernfalls nur die Teaser-Elemente einblenden, die dem Filterwert entsprechen $("a.teaser[data-country='" + filterValue + "']").css("display", "flex"); $(".container[data-country='" + filterValue + "']").css("display", "inline-block"); } }); });
Filter-Area
Last Edit: Dec 6, 2023, 9:24am
×
All
Filter 1
Filter 2
Filter 3