Как реализовать такие табы или с помощью чего?

<div id="tab-controls">
    <button data-tab="tab-1">Tab 1</button>
    <button data-tab="tab-2">Tab 2</button>
    <button data-tab="tab-3">Tab 3</button>
</div>

<div id="tab-1">
    <button id="tab-1-filter-1">Filter 1</button>
    <button id="tab-1-filter-2">Filter 2</button>
    <button id="tab-1-filter-3">Filter 3</button>
    <div clas="tab-content">
         <div class="tab-1-element filter-1 filter-2" ></div>
    ...
    </div>
</div>

<script>
$('#tab-1-filter-1').click(e=>{
      $('.tab-1-element').hide().filter(':has(.filter-1)').show();
});
</script>