Tengo una lista de pestañas dinámica, quería agregar una pestaña "Todos". El clic de la pestaña "3todos" muestra todos los botes.

Para este código, solo muestra la pestaña dinámica, por lo tanto, estoy buscando una solución para agregar una pestaña "Todos"

Probé alguna solución pero no llego

La idea es agregar la pestaña atática "Todos"

 <?php echo '<ul class="nav nav-tabs" role="tablist">'; $args = array( 'taxonomy' => 'annualreports_category', 'hide_empty'=>0, 'orderby' => 'name', 'order' => 'ASC' ); $categories = get_categories($args); foreach($categories as $category) { echo '<li> <span data-href="'.$category->slug.'" role="tab" data-toggle="tab"> '.$category->name.' </span> </li>'; } echo '</ul>'; echo '<div class="investors-content">'; foreach($categories as $category) { echo '<div class="tab-pane" id="' . $category->slug.'">'; $catslug = $category->slug; $the_query = new WP_Query(array( 'post_type' => 'annualreports_post', 'posts_per_page' => -1, 'tax_query' => array( array( 'taxonomy' => 'annualreports_category', 'field' => 'slug', 'terms' => array( $catslug ), 'operator' => 'IN' ), ), )); while ( $the_query->have_posts() ) : $the_query->the_post(); echo '<h1>'; the_title(); echo '</h1>'; endwhile; echo '</div>'; } echo '</div>'; ?> <script> $(".investors-content .tab-pane").each(function(){ $(this).hide(); $('.investors-content .tab-pane:first-child()').show(); }); $('.nav-tabs li>span').on( "click", function(e) { e.preventDefault(); var id = $(this).attr('data-href'); $(".investors-content .tab-pane").each(function(){ $(this).hide(); if($(this).attr('id') == id) { $(this).show(); } }); });