I'm looking for simple and seo/semantic way to filter and sort some content.
Initially all content should be shown, then on click the content should be filtered and only the selected group show.
I'm starting out with the code below as my base. Using widgets as example. Each widget is in its own div containing information about that widget.
Currently the default is to hide all, I'd prefer to show all to be default (I'm not sure why the very first one is showing alone on load.
Is there a way to do it without initially using display:none for the divs, my understanding is this might not be seo friendly.
$('.tab-link').click(function() {
var contClass = $(this).data('div');
$('.result-content').hide().filter('.' + contClass).show()
}).result-content {
display: none
}
.result-content:first-of-type {
display: block
}
a {
display: inline-block;
margin-right: 10px;
padding: 5px 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<a href="#" class="tab-link" data-div="widgets">All widgets</a>
<a href="#" class="tab-link" data-div="green-widgets">Green</a>
<a href="#" class="tab-link" data-div="red-widgets">Red</a>
<a href="#" class="tab-link" data-div="blue-widgets">Blue</a>
<div class="widgets green-widgets result-content">
Widget 654
</div>
<div class="widgets green-widgets result-content">
Widget 989
</div>
<div class="widgets green-widgets result-content">
Widget 345
</div>
<div class="widgets red-widgets result-content">
Widget 563
</div>
<div class="widgets red-widgets result-content">
Widget 867
</div>
<div class="widgets blue-widgets result-content">
Widget 994
</div>
<div class="widgets blue-widgets result-content">
Widget 924
</div>
<div class="widgets blue-widgets result-content">
Widget 114
</div>