Estoy buscando una forma simple y seo/semántica de filtrar y ordenar algún contenido.
Inicialmente, se debe mostrar todo el contenido, luego, al hacer clic, se debe filtrar el contenido y solo se muestra el grupo seleccionado.
Estoy comenzando con el siguiente código como base. Usando widgets como ejemplo. Cada widget está en su propio div que contiene información sobre ese widget.
Actualmente, el valor predeterminado es ocultar todo, prefiero mostrar todo como predeterminado (no estoy seguro de por qué el primero se muestra solo en la carga).
¿Hay alguna manera de hacerlo sin usar inicialmente display:none para los divs? Entiendo que esto podría no ser compatible con SEO.
$('.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>